Ajax和Action之間Json資料的互動--包含List資料轉送

來源:互聯網
上載者:User

怕以後忘記,作為筆記,解釋包含在代碼中。 註:此處用的 Jquery 的AJAX 1. 傳遞基本的資料類型

UserAction

package action;import java.io.IOException;import java.sql.Connection;import java.sql.DriverManager;import java.sql.PreparedStatement;import java.sql.ResultSet;import com.opensymphony.xwork2.ActionSupport;public class UserAction extends ActionSupport{    /**        此處的屬性值,與前台ajax的請求參數一致,參數是通過structs預設的攔截器將請求參數 進行攔截並通過set方法傳遞進來。    */    private String value;//背景屬性與ajax發送的資料名一致 有set get    private String url;//返回的值 有get方法--用於ajax擷取    public String getValue() {        return value;    }    public void setValue(String value) {        this.value = value;    }    public String test1(){        url="test1";        System.out.println(value);        return SUCCESS;    }

structs2.xml
所謂的JSON就是一種key -value形式的數值格式,一種輕量級的資料交換格式。

<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd"><struts>    <package name="actions" namespace="/" extends="json-default">    <action name="user" class="action.UserAction" method="test1">        <!-- <result name="success">/1.jsp</result> -->        <!--在stucts2中,type="json"是用來做ajax請求的,所以根本沒有跳轉頁面,Json是一種資料格式,這個result會將action中的所有變數 轉成json返回頁面 -->        <result name="success" type="json">           </result>    </action>    </package></struts>    

jsp:代碼–

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <base href="<%=basePath%>">    <title>My JSP 'index.jsp' starting page</title>    <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>    <script type="text/javascript">        $(function(){            $("#button").click(function(){                 $.ajax({                     type: "GET",                     //url指明傳遞參數到哪個action                     url: "user.action",                     data: {value:"msg"},//形式為key-value                     dataType: "json",//資料類型                     success: function(data){                     //data是後台返回Json 資料的一個屬性集合,要訪問返回的url必須通過data.url訪問。                                alert(data.url);                          },                     error: function(err) {                                alert(err);                        }                     });             });            });    </script>  </head>  <body>    <input id="button" type="button" value="圖書" >                 </body></html>

結果:
後台收到資料:

前台顯示後台返回的資料
2. 傳遞實體物件

基本如上:

public class OrderAction extends ActionSupport {    private Order order = new Order();    public execute(){        //這裡對order進行內容賦值        //order.setOrderName().......;        return success;    }}

xml檔案返回與上述基本類型一致,指明action的類及方法,返回json類型即可。

ajax:

 $.ajax({                     type: "GET",                     url: "user.action",                     data: {value:"msg"},//形式為key-value                     dataType: "json",                     success: function(data){                  //通過訪問到order實體,再訪問裡面的屬性值                        alert(data.order.orderName);                          },                     error: function(err) {                                alert(err);                        }                     });             });
3. 訪問List

前台:
list通過Jquery迴圈讀取

$.ajax({                     type: "GET",                     url: "getproducts.action",                     data: {msg:"時尚男裝"},                     dataType: "json",                     success: function(data){                     //alert("返回成功");                        //這裡 要為data.list  data是一個object//data.list為迴圈的對象,index為迴圈的下標,content為每次迴圈的對象。              $.each(data.list,function(index,content){                     alert(content.name);                                                 });                          },                     error: function(err) {alert("erro");}                     });                     });

xml檔案與例子1一樣。

後台:

private List<Products> list;//用於返回的List數組、set方法。。。。get方法。。。。
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.