struts2實現jQuery的異步交互

時間 2019-11-26

標籤 struts2 struts 實現 jquery 異步交互欄目 Struts 简体版

原文原文鏈接

struts2中jQuery的異步交互有兩種方式：javascript

1）是利用構造字符串的方式來實現；css

使用該方法主要是在服務器端根據前端的請求，返回一個字符串信息，而後前端的jQuery經過解析該字符串信息獲得對應的請求內容。該方法優勢是使用比較靈活，缺點是使用比較複雜。html

2）是利用struts自帶的jQuery插件來實現。前端

使用插件方法時，其過程比較簡單，和配置普通action信息同樣。須要構造XXXset和XXXget方法以及execute方法。而後在struts.xml文件中配置action。該方法優勢是使用簡單，缺點是：須要在action中定義出前端頁面中可能要獲取的全部屬性信息，使用起來不夠靈活。java

下面經過代碼看一下：jquery

Person屬性映射表ajax

 1 package com.action.xml;
 2 
 3 public class Person {
 4 
 5     private int id;
 6     private String name;
 7     private int age;
 8     private String address;
 9     public int getId() {
10         return id;
11     }
12     public void setId(int id) {
13         this.id = id;
14     }
15     public String getName() {
16         return name;
17     }
18     public void setName(String name) {
19         this.name = name;
20     }
21     public int getAge() {
22         return age;
23     }
24     public void setAge(int age) {
25         this.age = age;
26     }
27     public String getAddress() {
28         return address;
29     }
30     public void setAddress(String address) {
31         this.address = address;
32     }
33     
34 }

客戶端頁面getJson.jsp代碼：apache

 1 <%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
 2 <%
 3 String path = request.getContextPath();
 4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 5 %>
 6 
 7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 8 <html>
 9   <head>
10     <base href="<%=basePath%>">
11     
12     <title>My JSP 'getJson.jsp' starting page</title>
13     <script type="text/javascript" src="scripts/jquery-1.4.4.js"></script>
14     <meta http-equiv="pragma" content="no-cache">
15     <meta http-equiv="cache-control" content="no-cache">
16     <meta http-equiv="expires" content="0">    
17     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
18     <meta http-equiv="description" content="This is my page">
19     <!--
20     <link rel="stylesheet" type="text/css" href="styles.css">
21     -->
22     
23     <script type="text/javascript">
24      
25        $(function(){
26            $("#button1").click(function(){
27                $.post("getJsonAction2.action",{name:$("#name").val()},function(returnedData,status){
28                    var html = "<table width='60%' border='1' align='center'><tr><th>id</th><th>name</th><th>age</th><th>address</th></tr>";
29                    
30                    
31                        var people = returnedData;
32                        var id = people.id;
33                        var name = people.name;
34                        var age = people.age;
35                        var address = people.address;
36                        
37                        var html = "<table width='60%' border='1' align='center'><tr><th>id</th><th>name</th><th>age</th><th>address</th><tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+address+"</td></tr></tr></table>";
38                 
39                     $("#theBody table:eq(0)").remove();//找到id爲theBody的body中的第0個table（即第一個table表）將其的內容刪除掉，防止出現累加
40                     $("#theBody").append(html);//將構建的HTML加入到id爲theBody的body中
41                        
42                });
43            });
44        })
45     
46     </script>
47   </head>
48   
49   <body id="theBody">
50     
51     <select id="name">
52         <option value="zhangsan">zhangsan</option>
53         <option value="lisi">lisi</option>
54     </select>
55     <input type="button" value="get json information form server" id="button1">   
56   </body>
57 </html>

以上代碼是兩種方式都會使用的公共代碼json

（1）首先是經過構造字符串實現異步交互代碼：瀏覽器

注意：須要在WebRoot目錄中導入jQuery庫

 1 package com.action.json;
 2 
 3 import java.io.PrintWriter;
 4 
 5 import javax.servlet.http.HttpServletResponse;
 6 
 7 import org.apache.struts2.ServletActionContext;
 8 import org.dom4j.io.OutputFormat;
 9 import org.dom4j.io.XMLWriter;
10 
11 import com.action.xml.Person;
12 import com.google.gson.Gson;
13 import com.opensymphony.xwork2.ActionSupport;
14 
15 @SuppressWarnings("serial")
16 public class GetJsonAction extends ActionSupport {
17 
18     
19     private String name;
20 
21     public String getName() {
22         return name;
23     }
24 
25     public void setName(String name) {
26         this.name = name;
27     }
28     
29     @Override
30     public String execute() throws Exception {
31         
32         Person people = new Person();
33         
34         people.setId(1);
35         people.setName(name);
36         people.setAge(20);
37         people.setAddress("beijing");
38         
39         Gson gson = new Gson();
40         //經過Gson對象將Person對象內容以字符串格式返回
41         String result = gson.toJson(people);
42         
43         System.out.println(result);
44         
45         HttpServletResponse response = ServletActionContext.getResponse();
46         //設置http頭，不使用瀏覽器緩衝
47         response.setHeader("cache-control", "no-cache");
48         //設置內容類型：xml異步交互是：「text/xml」;json異步交互此處是application/json
49         response.setContentType("application/json;charset=GB18030");
50         
51         PrintWriter out = response.getWriter();
52         
53         out.print(result);
54         
55         /*
56         OutputFormat format = OutputFormat.createCompactFormat();
57         format.setEncoding("GB18030");
58         
59         XMLWriter writer = new XMLWriter(out,  format);
60         
61         writer.write(result);*/
62     
63         out.flush();
64         out.close();
65     
66         return null;
67     }
68 }

Struts.xml配置文件的配置信息

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <!DOCTYPE struts PUBLIC
 3     "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
 4     "http://struts.apache.org/dtds/struts-2.3.dtd">
 5 <struts>
 6     <!-- 設置Struts運行模式爲開發者模式，若是value爲false則關閉開發者模式 -->
 7     <constant name="struts2.devMode" value="true"></constant>
 8     
 9     <package name="struts2_ajax" namespace="/" extends="struts-default">
10         
11         
12         <action name="getJsonAction" class="com.action.json.GetJsonAction">
13         
14         </action>      
15         
16     </package>
17 </struts>

（2）經過struts中的json插件實現交互代碼：

說明：使用插件的方式須要導入struts給提供的struts2-json-plugin-2.3.24.jar插件

GetJsonAction2.java代碼

 1 package com.action.json;
 2 
 3 import org.apache.struts2.json.annotations.JSON;
 4 
 5 import com.opensymphony.xwork2.ActionSupport;
 6 
 7 @SuppressWarnings("serial")
 8 public class GetJsonAction2 extends ActionSupport {
 9 
10     private String name;
11     
12     private int id;
13     
14     private int age;
15     
16     private String address;
17 
18     public String getName() {
19         return name;
20     }
21 
22     public void setName(String name) {
23         this.name = name;
24     }
25 
26     public int getId() {
27         return id;
28     }
29 
30     public void setId(int id) {
31         this.id = id;
32     }
33 
34     //@JSON(name="myAge")//使用註解方式配置action
35     public int getAge() {
36         return age;
37     }
38 
39     public void setAge(int age) {
40         this.age = age;
41     }
42 
43     public String getAddress() {
44         return address;
45     }
46 
47     public void setAddress(String address) {
48         this.address = address;
49     }
50     
51     @Override
52     public String execute() throws Exception {
53         
54         this.id = 1;
55         this.age = 30;
56         this.address = "brijing";
57 
58         return SUCCESS;
59     }
60 }

struts.xml配置文件的配置信息

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <!DOCTYPE struts PUBLIC
 3     "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
 4     "http://struts.apache.org/dtds/struts-2.3.dtd">
 5 <struts>
 6     <!-- 設置Struts運行模式爲開發者模式，若是value爲false則關閉開發者模式 -->
 7     <constant name="struts2.devMode" value="true"></constant>
 8     
 9     <package name="struts2_ajax" namespace="/" extends="json-default"><!-- 使用json插件是須要繼承json-default -->
10         
11         <!-- 利用struts的json插件 -->
12         <action name="getJsonAction2" class="com.action.json.GetJsonAction2">
13             <result name="success" type="json">
14                 <!-- 若是有不須要獲取的屬性則須要使用如下語句過濾掉不須要的屬性 -->
15                 <!-- <param name="excludeProperties">address</param> -->
16             </result>
17   
18         </action>
19     </package>
20 </struts>