Struts2 整合jQuery实现Ajax功能(2)

1.1.1   Action利用struts2-json-plugin-X.X.X.jar响应Json格式信息:

1.      function removerecordbyid(recordid){

2.              $("#showallrecord table tr").each(

3.              function(){

4.                var seq=parseInt($( this ).children( "td" ).html());

5.                var thisrecord =  this ;

6.                if(seq==recordid)

7.                  if(confirm( "您确认执行删除操作么?")){

8.                      $.ajax({

9.                          type: "POST",

10.                       url:"removeRecordById.action",

11.                       dataType:"json",

12.                       data:{"msg.id":recordid},

13.                       success:function(json){

14.                           if(json.status==4){

15.                               alert("删除失败,只有提交留言的ip才能删除" );

16.                           }else{

17.                               $(thisrecord).remove();

18.   //                          alert("删除成功");

19.                           }

20.                       },

21.                       error:function(){

22.                           alert("del error");

23.                       }

24.                   });

25.               }

26.           });

27.       }

Action代码(做了简化)

1.      public   class  CrudMsgAction  extends ActionSupport{

2.          private Record msg;

3.          private   int index;

4.          private RecordService recordService;

5.          private List<Record> records;

6.          private   int  status = 0 ;

7.          private   int page =  0 ;

8.

9.          @JSON (serialize= false)

10.       public RecordService getRecordService() {

11.           return recordService;

12.       }

13.

14.       /**

15.        * 返回所有记录的JSON数据

16.        * @return list . All of the record.

17.        * @throws Exception

18.        */

19.       public String listAllRecord()  throws  Exception{

20.           List<Record> list = recordService.listAllRecord();

21.           records = list;

22.           return SUCCESS;

23.       }

24.

25.       public String listAllRecordByPage()  throws Exception{

26.           List<Record> list = recordService.listAllRecord(page);

27.           records = list;

28.           return SUCCESS;

29.       }

30.

31.       /**

32.        * 插入记录

33.        * @return update the view with AJAX when struts2 action return

34.        * @throws Exception

35.        */

36.       public String listRecordByIndex()  throws  Exception{

37.           List<Record> list = recordService.listAllRecord();

38.           this.msg = list.get( this .getIndex());

39.

40.           return SUCCESS;

41.       }

42.       /**

43.        * 删除对应id记录

44.        * @return field status. in order to update view with AJAX

45.        * @throws Exception

46.        */

47.       public String removeRecordById()  throws  Exception{

48.           String clientIpAddr = ServletActionContext.getRequest().getRemoteAddr();

49.           Record r = recordService.listRecordById(msg.getId());

50.           if(clientIpAddr.equals(r.getIpaddr())){

51.               recordService.removeRecordById(msg.getId());

52.               return SUCCESS;

53.           }

54.           status = 4;

55.           return SUCCESS;

56.       }

57.

58.       /**    获得分页数      */

59.       public String getPageSize()  throws  Exception{

60.           page = recordService.getPage();

61.           return SUCCESS;

62.       }

63.   }

上面代码中,使用了 @JSON(serialize=false),

除此之外,@JSON还支持如下几个域:

name:指定Action属性被序列化成JSON对象的属性名。

serialize:设置是否序列化该属性

deserialize:设置是否反序列化该属性。

format:设置用于格式化输出、解析日期表单域的格式。例如"yyyy-MM-dd‘T‘HH:mm:ss"

1.       < package   name = "json"  extends = "json-default" >

2.              <action   name = "ajaxRequest"   class ="com.jun.demos.struts2json.HelloWorld" >

3.                  <result   type = "json"   />

4.              </action >

5.              <action   name = "listIndexRecord"   class ="com.jun.demos.book.action.CrudMsgAction" >

6.                  <result   type = "json"   />

7.              </action >

8.              <action   name = "listAllRecord"   class ="com.jun.demos.book.action.CrudMsgAction"   method ="listAllRecord" >

9.                  <result   type = "json"   />

10.           </action >

11.           <action   name = "removeRecordById"   class ="CrudMsgAction"   method = "removeRecordById" >

12.               <result   type = "json"   />

13.           </action >

14.           <action   name = "getPageIndex"   class = " CrudMsgAction"  method = "getPageSize" >

15.               <result   type = "json"   />

16.           </action >

17.      </package >

配置该Action与配置普通Action存在小小的区别。

包继承了json-default包,而不再继承默认的default包,这是因为只有在该包下才有json类型的Result。

Result可以使用 <param name="excludeProperties">page,index</param>排除Action 中这些都不返回的属性.

我们只要输出person对象的name属性值,配置如下

1.     <result type="json">

2.         <param name="root">person.name</param>

3.     </result>

excludeNullProperties参数:表示是否去掉空值, 默认值是false

4.     <result type="json">

5.         <param name="excludeNullProperties">true</param>

6.      </result>

ignoreHierarchy参数:表示是否忽略等级,也就是继承关系,比如:TestAction继承于BaseAction,那么TestAction中返回的json字符串默认是不会包含父类BaseAction的属性值,ignoreHierarchy值默认为true

7.      <result type="json">

8.          <param name="ignoreHierarchy">false</param>

9.      </result>

includeProperties参数:输出结果中需要包含的属性值,这里正则表达式和属性名匹配,可以用“,”分割填充多个正则表达式。 如:输出person的所有属性

10.   <result type="json">

11.       <param name="includeProperties">person.*, person/.name</param>

12.   </result>

例如:

<!-- 购房合同管理 namespace保证action的路径与jQuery兼容-->

<package
name="yushou_hetong"
extends="json-default"namespace="/pages/hetong">

<actionname="hetongAdd"class="hetongAddAction">

<result
name="list">/pages/hetong/qylist.jsp</result>

<!-- <resultname="add">/pages/hetong/add.jsp</result>
改用纯Html+jQuery-->

<result
name="add">/pages/hetong/add.html</result>

<result
name="Query">/pages/hetong/query.html</result>

<result
name="xiangmu">/pages/hetong/add/xiangmu.jsp</result>

<result
name="loupan">/pages/hetong/add/loupan.jsp</result>

<result
name="house">/pages/hetong/add/house.jsp</result>

<result
name="houseList">/pages/hetong/add/houseList.jsp</result>

<result
name="fukuan">/pages/hetong/add/fukuan.jsp</result>

<result
name= "success" 
type="json"
>

<param
name="ignoreHierarchy">false</param>

<param
name="includeProperties">errmsg</param>

</result>

</action>

</package>

二级联动标签

在struts2
标签s:doubleselect二级联动标签的基础上实现事件:第二级onchange时调用struts2 action,在action中查询一个名称,然后返回回来,此信息显示在页面上(这只是给用户一个提示信息,不影响表单能否提交)

需要加事件的二级联动jsp代码

1.         <td class="alignLeft" width="22%">   所属业务/项目名称:   </td>

2.         <td valign="top" class="alignLeft" width="20%">

3.             <s:doubleselect name="changeApplyFormBO.operationId" list="operationList" listKey="id"

4.             listValue="operationName" doubleList="operationSubProductList"

5.             doubleListKey="id" doubleListValue="prudName"  doubleName="changeApplyFormBO.productId"

6.             headerKey=""  headerValue="--- Please Select ---" />

7.              <span id="company" style="color:red"></span>

8.         </td>

我们需要在“项目名称”被改变的事件下调用函数,在生成的静态页面中查得它的id是cbApplySubmit_changeApplyFormBO_productId

说明一下,这里生成的id有一点规律,貌似。cbApplySubmit是本页面form表单的action,而changeApplyFormBO.productId是“项目名称”的name

下面给出定制下拉菜单事件的js

1.     <script>

2.

3.           $(function(){

4.               var obj=document.getElementById("cbApplySubmit_changeApplyFormBO_productId");

5.               obj.onchange=function(){

6.                var prodId=obj.value;

7.                var url="${contextPath}/assets/businessChange/ajaxGetCompany.do";

8.                var jsonProd={productId:prodId};    //JSON对象

9.                var prodStr=JSON.stringify(jsonProd);    //将JSON对象转变成JSON格式的字符串

10.              $.post(url,{json:prodStr},callback,"json");

11.             }

12.           function callback(json){

13.               $("#company").html(json.msg);

14.            }

15.        });

16.

17.   </script>

这里,不管是从浏览器端(JS,Ajax,Jquery等)发送给服务器端,还是从服务器端(Struts的Action,Servlet等)发送回客户端,发送的都是JSON格式的字符串

解释如下:

1.     var jsonProd={productId:prodId};

这句是组装JSON对象,这里很简单,key是productId,value是页面选择的项目名称的id

1.     //将JSON对象转变成JSON格式的字符串

2.     var prodStr=JSON.stringify(jsonProd);

通过JavaScript内置对象JSON的stringify方法,将JSON对象转换成字符串。因为,我们传送给服务器端的要是JSON格式的字符串。

1.     $.post(url,{json:prodStr},callback,"json");

这一句,jquery用POST方法向服务器端发送数据,url是我们要调用的action全路径,而{json:prodStr}是我们要发送的数据(data),{json:prodStr},其实也是一个JSON对象,Key:value的形式,注意,我们把prodStr这个json串发过去,在Action那里接收时,要接收“json”这个变量,这个变量的值就是我们发送的prodStr字符串。

回调函数(callback)是指服务器端成功返回时,在JS端执行的函数。最后一个参数“json”是返回数据类型的一种,另外,还有”text”、“xml”等

function callback(json){

1.             $("#company").html(json.msg);

2.          }

3.      });

company是span的id,请看最上面二级联动标签处。这个函数用来显示action中组装的json对象的value值

struts2 action类

1.     import org.json.JSONObject;

2.

3.     public class CBApplyAction extends ActionSupport {

4.         private IProductMng productMng;

5.         private String json;

6.         /**

7.          * 通过选择的项目名称,给出提示事业部名称的提示信息

8.          *

9.          * @return

10.        * @throws Exception

11.        */

12.       public void ajaxGetCompany() throws Exception {

13.           JSONObject jsonObj = new JSONObject(json); // 将JSON格式的字符串构造成JSON对象

14.

15.           String productId = jsonObj.getString("productId"); // 获取JSON对象中的productId属性的值

16.

17.           ProductBO prod = productMng.loadProduct(Integer.parseInt(productId));

18.           Integer companyId = prod.getCompanyId();

19.           CompanyBO comp = productMng.loadCompany(companyId);

20.           String companyName = "事业部为:" + comp.getName();

21.           json = "{msg:‘" + companyName + "‘}";    //构造JSON格式的字符串

22.           sendMsg(json);    //发送JSON格式的字符串回JS端

23.       }

24.

25.       public void sendMsg(String content) throws IOException{

26.           HttpServletResponse response = ServletActionContext.getResponse();

27.           response.setCharacterEncoding("UTF-8");

28.           response.getWriter().write(content);

29.       }

30.

31.       public String getJson() {

32.           return json;

33.       }

34.

35.       public void setJson(String json) {

36.           this.json = json;

37.       }

38.

39.       public void setProductMng(IProductMng productMng) {

40.           this.productMng = productMng;

41.       }

42.   }

JSONObject是我从json的网站http://www.json.org/java/index.html上下载了一些java文件,然后将这些.java文件打成一个jar包json.jar,放在项目lib里面
ajaxGetCompany方法没有像struts2 别的方法那样有返回值String,这里设的是void,因我们不需要任何跳转.

这里有个需要注意的,json= "{msg:‘" + companyName + "‘}"; companyName外面应该有引号括起来

 struts2 配置文件

1.     <action name="ajaxGetCompany" class="CBApplyAction"

2.         method="ajaxGetCompany">

3.     </action>

没有result

Struts2 整合jQuery实现Ajax功能(2)

时间: 2024-10-17 14:00:55

Struts2 整合jQuery实现Ajax功能(2)的相关文章

Struts2 整合jQuery实现Ajax功能(1)

技术领域很多东西流行,自然有流行的道理,这几天用了jQuery,深感有些人真是聪明绝顶,能将那么多技术融合的如此完美. 首先明确个概念: jQuery是什么:是使用javascript语言开发的,用于满足项目前台各种操作需要的js程序文件.也就是说,jQuery基本上就是个js程序集,基础核心是jQuery.js文件. l        当然根据不同的版本具体的表现形式: jQuery.1.6.js或者jquery-1.5.1.js 这个是版本号的不同,具体有哪些区别,还没发现. l      

黑马程序员_使用Jquery实现AJAX功能

1.AJAX是什么? AJAX技术虽然一直听过,但是真正用起来还是工作有一年了的时候,当时需要实现一个异步更新推送的功能.如:在档案管理系统中,存在代办事项和站内信,而这些模块需要在页面不刷新的情况下定时的反馈给前台待办事项的数量以及简要内容,站内信也是如此.这个时候我认为只有AJAX能够胜任,那AJAX是什么?AJAX是在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术. 2.为什么使用Jquery来实现? 学习ASP.NET开始,Jquery的强大已经深深捕获了我,而且我还记着

Spring+Hibernate+Struts2整合之实现登录功能

软件152 刘安民 前端代码: <form id="loginForm" action="${ pageContext.request.contextPath }/user_login.action" method="post" novalidate="novalidate"> <table> <tbody><tr> <th> 用户名: </th> <

从零开始学习jQuery (六) AJAX快餐

原文:从零开始学习jQuery (六) AJAX快餐 本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery中的Ajax 从零开始学习jQuery (七) jQuery动画-让页面动起来! 从零开始学习jQuery

份-城市,基于jQuery的AJAX二级联动,用Struts2整合AJAX【非数据库版】

package loaderman.provincecity; import java.io.IOException; import java.util.LinkedHashSet; import java.util.Set; import com.opensymphony.xwork2.ActionSupport; /** * 控制器 * @author AdminTC */ public class ProvinceCityAction extends ActionSupport{ priv

struts2+jquery 实现ajax登陆

一.新建一个web项目:test,配置好struts2的环境(详细配置见:http://www.cnblogs.com/wuweidu/p/3841297.html)       导入Jquery的js文件到项目 二.在com.action包下,新建一个loginAction.java loginAction.java的代码如下 package com.action; import org.apache.struts2.convention.annotation.Action; import o

struts2框架通过jQuery实现AJAX应用

众所周知,在web2.0时代,哪个web框架要是不跟AJAX沾点边,都不好意思说自己的框架有多么多么NB,当然struts也不例外,从 struts1开始到现在的struts2也都对AJAX有支持.AJAX的传输过程中的数据格式有很多(eg:xml,html,纯文本,json), 在这里所演示的是通过json格式来传输.有的朋友可能看多相关的技术博客,有的是通过struts2的插件(e.g., JSON plugin, jQuery plugin)来实现的,这种方法从理论上来说肯定开发效率要高些

Struts2+Jquery+实现Ajax无刷新验证用户名是否存在

小弟之前一直搞不明白Struts2+Jquery+实现Ajax无刷新验证用户名该怎么弄,后来经过努力,终于搞定了,应注意struts配置文件的内容,好了直接上代码了 页面代码 <body> <s:form action="registAction" method="post" namespace="/user"> <table> <tr> <td>UserName</td>

jQuery+php+Ajax文章列表点击加载更多功能

jQuery+php+Ajax实现的一个简单实用的文章列表点击加载更多功能,点击加载更多按钮,文章列表加载更多数据,加载中有loading动画效果. js部分: 1 <script type="text/javascript" src="jquery.more.js"></script> 2 <script type="text/javascript"> 3 $(function() { 4 $('#more'