怕以後忘記,作為筆記,解釋包含在代碼中。 註:此處用的 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方法。。。。