struts2+jquery实现ajax异步提交并返回json串
2016-01-22 13:52
525 查看
rt.
一、环境准备struts2.3+jquery1.12+jackson1.9
除了struts2核心jar包外,还需下载struts2-json-plugin.jar,否则运行报错!!!
二、代码
testAJAX.jsp
JsonAction.java
有一部分代码是做测试用,可以自动忽略。
struts.xml
这里需要注意:package必须从json-default继承而不是struts-default继承,否则程序启动报错,或者在package中添加result-type,形如:
三、运行效果:
end.
一、环境准备struts2.3+jquery1.12+jackson1.9
除了struts2核心jar包外,还需下载struts2-json-plugin.jar,否则运行报错!!!
二、代码
testAJAX.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>struts2+jquery</title> </head> <body> <div> <h5>录入数据</h5> <br /> <form action="#" method="post"> <label>姓名:</label><input type="text" name="name" /> <label>年龄:</label><input type="text" name="age" /> <label>职务:</label><input type="text" name="position" /> <input type="button" class="btn" value="提交结果" /> </form> <br /> <h5>显示结果</h5> <br /> <ul> <li>姓名:<span id="s_name">none</span></li> <li>年龄:<span id="s_age">none</span></li> <li>职务:<span id="s_position">none</span></li> </ul> </div> <script type="text/javascript" src="jquery/jquery-1.12.0.min.js"></script> <script type="text/javascript"> /* 页面加载完成,绑定事件 */ $(document).ready(function() { btn(); }); /* 提交结果,执行ajax */ function btn() { var $btn = $("input.btn");//获取按钮元素 //给按钮绑定点击事件 $btn.bind("click", function() { $.ajax({ type : "post", url : "excuteAjaxJsonAction",//需要用来处理ajax请求的action,excuteAjax为处理的方法名,JsonAction为action名 data : {//设置数据源 name : $("input[name=name]").val(), age : $("input[name=age]").val(), position : $("input[name=position]").val() }, dataType : "json",//设置需要返回的数据类型 success : function(data) { alert("data=" + data); var d = eval("(" + data + ")"); //将数据转换成json类型,可以把data用alert()输出出来看看到底是什么样的结构 alert("d.length=" + d.length); $("#s_name").text("" + d[0].name + ""); $("#s_age").text("" + d[0].age + ""); $("#s_position").text("" + d[0].posititon + ""); }, error : function() { alert("exception."); } }); }); } </script> </body> </html>
JsonAction.java
有一部分代码是做测试用,可以自动忽略。
import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import org.apache.log4j.Logger; import org.codehaus.jackson.map.ObjectMapper; import com.wyglxt.base.BaseAction; public class JsonAction extends BaseAction { private static final long serialVersionUID = 7951770011065306314L; private static final Logger log = Logger.getLogger(JsonAction.class); private String result; private String name; private String age; private String position; /** * 处理ajax请求 * * @return SUCCESS */ public String excuteAjax() { try { // 将数据存储在map里,再转换成json类型数据,也可以自己手动构造json类型数据 Map<String, Object> map = new HashMap<String, Object>(); map.put("name", name); map.put("age", age); map.put("position", position); Test test = new Test(); test.setAge(age); test.setName(name); test.setPosititon(position); List<Test> list = new ArrayList<Test>(); list.add(test); // 将map对象转换成json类型数据 // JSONObject json = JSONObject.fromObject(map); ObjectMapper mapper = new ObjectMapper(); // JsonGenerator generator = // mapper.getJsonFactory().createJsonGenerator(System.out, // JsonEncoding.UTF8); // 给result赋值,传递给页面 setResult(mapper.writeValueAsString(list)); log.info(result); } catch (Exception e) { e.printStackTrace(); } return SUCCESS; } public String getResult() { return result; } public void setResult(String result) { this.result = result; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getAge() { return age; } public void setAge(String age) { this.age = age; } public String getPosition() { return position; } public void setPosition(String position) { this.position = position; } } class Test { private String name; private String age; private String posititon; public String getName() { return name; } public void setName(String name) { this.name = name; } public String getAge() { return age; } public void setAge(String age) { this.age = age; } public String getPosititon() { return posititon; } public void setPosititon(String posititon) { this.posititon = posititon; } }
struts.xml
这里需要注意:package必须从json-default继承而不是struts-default继承,否则程序启动报错,或者在package中添加result-type,形如:
<result-types> <result-type name="json" class="org.apache.struts2.json.JSONResult"/> </result-types>
<?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="default" namespace="/" extends="json-default"> <!-- for json --> <action name="*JsonAction" method="{1}" class="com.wyglxt.action.JsonAction"> <!-- 返回json类型数据 --> <result type="json"> <param name="root">result<!-- result是action中设置的变量名,也是页面需要返回的数据,该变量必须有setter和getter方法 --></param> </result> </action> </package> </struts>
三、运行效果:
end.
相关文章推荐
- jQuery中attr()函数 VS prop()函数
- jquery懒加载图片的插件 jquery懒加载图片的插件
- jquery刷新iframe页面的方法
- jQuery Mobile加载外部文件的问题
- jQuery之基础选择器
- jquery日历插件datepicker用法分析
- jQuery事件之中有其他事件,return 和局部变量无效
- jQuery UI 对话框(Dialog) - 模态表单
- jquery.validate提示错误信息位置方法
- jQuery ajax时间差导致的变量赋值问题分析
- jQuery简单获取键盘事件的方法
- 利用jquery.validate异步验证用户名是否存在
- 自己封装的ajax
- EasyUi、SpringMVC、jquery的ajax、导出Excel文件
- JQuery 判断某个属性是否存在 hasAttr
- JQuery 的跨域方法 可跨任意网站
- jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
- jQuery弹层插件jquery.fancybox.js用法实例
- jQuery Form 表单提交插件-----formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的 应用
- jQuery validate插件实现ajax验证重复的2种方法