首页 > 代码库 > JQuery+Json
JQuery+Json
结合使用jQuery和Json的话感觉不错,操作上来说很方便,先简单说说Json的一些优点,当然Json不仅仅这些优点。
1.方便前台数据的操作。
2.数据体积小,传输快。
3.客户端操纵XML的时候需要创建ActiveX对象,Json则完全就是一个JS对象,它不需要创建DOM。
下面是一个简单的例子,大家可以参考一下,主要功能有:1.获取js值、2.获取单个值、3.获取对象值、4.获取List对象、5.获取Map对象。
具体代码如下:
先看看控制器Action的代码。JsonJqueryStruts2Action.java:
[java] view plaincopyprint?
- package struts2jsonjquery.test.action;
- import java.util.ArrayList;
- import java.util.HashMap;
- import java.util.List;
- import java.util.Map;
- import struts2jsonjquery.test.entity.UserInfo;
- import com.opensymphony.xwork2.ActionSupport;
- public class JsonJqueryStruts2Action extends ActionSupport {
- private static final long serialVersionUID = 3518833679938898354L;
- private String message; //使用json返回单个值
- private UserInfo userInfo; //使用json返回对象
- private List<UserInfo> userInfosList; //使用josn返回List对象
- private Map<String,UserInfo> userInfosMap; //使用json返回Map对象
- /**
- * <p>
- * 返回单个值
- * <p>
- * @return
- */
- public String returnMessage(){
- this.message = "成功返回单个值:杨金德";
- return "message";
- }
- /**
- * <p>
- * 返回UserInfo对象
- * </p>
- * @return
- */
- public String returnUserInfo(){
- userInfo = new UserInfo();
- userInfo.setUserId(10000);
- userInfo.setUserName("柳梦璃");
- userInfo.setPassword("liumengli");
- return "userInfo";
- }
- /**
- * <p>
- * 返回List对象
- * </p>
- * @return
- */
- public String returnList(){
- userInfosList = new ArrayList<UserInfo>();
- UserInfo u1 = new UserInfo();
- u1.setUserId(10000);
- u1.setUserName("柳梦璃");
- u1.setPassword("liumengli");
- UserInfo u2 = new UserInfo();
- u2.setUserId(10001);
- u2.setUserName("韩菱纱");
- u2.setPassword("hanlingsha");
- UserInfo u3 = new UserInfo();
- u3.setUserId(10002);
- u3.setUserName("云天河");
- u3.setPassword("yuntianhe");
- UserInfo u4 = new UserInfo();
- u4.setUserId(10003);
- u4.setUserName("玄霄");
- u4.setPassword("xuanxiao");
- userInfosList.add(u1);
- userInfosList.add(u2);
- userInfosList.add(u3);
- userInfosList.add(u4);
- return "list";
- }
- /**
- * <p>
- * 返回Map对象
- * </p>
- * @return
- */
- public String returnMap(){
- userInfosMap = new HashMap<String,UserInfo>();
- UserInfo u1 = new UserInfo();
- u1.setUserId(10000);
- u1.setUserName("林月如");
- u1.setPassword("linyueru");
- UserInfo u2 = new UserInfo();
- u2.setUserId(10001);
- u2.setUserName("赵灵儿");
- u2.setPassword("zhaolinger");
- UserInfo u3 = new UserInfo();
- u3.setUserId(10002);
- u3.setUserName("李逍遥");
- u3.setPassword("lixiaoyao");
- UserInfo u4 = new UserInfo();
- u4.setUserId(10003);
- u4.setUserName("女娲");
- u4.setPassword("nvwa");
- userInfosMap.put(u1.getUserId()+"", u1);
- userInfosMap.put(u2.getUserId()+"", u2);
- userInfosMap.put(u3.getUserId()+"", u3);
- userInfosMap.put(u4.getUserId()+"", u4);
- return "map";
- }
- /**
- * <p>
- * 获得对象,也就是通过表达获得对象(异步的)
- * </P>
- * @return
- */
- public String gainUserInfo(){
- System.out.println("用户ID:"+userInfo.getUserId());
- System.out.println("用户名:"+userInfo.getUserName());
- System.out.println("密码:"+userInfo.getPassword());
- return "userInfo";
- }
- public String getMessage() {
- return message;
- }
- public void setMessage(String message) {
- this.message = message;
- }
- public UserInfo getUserInfo() {
- return userInfo;
- }
- public void setUserInfo(UserInfo userInfo) {
- this.userInfo = userInfo;
- }
- public List<UserInfo> getUserInfosList() {
- return userInfosList;
- }
- public void setUserInfosList(List<UserInfo> userInfosList) {
- this.userInfosList = userInfosList;
- }
- public Map<String, UserInfo> getUserInfosMap() {
- return userInfosMap;
- }
- public void setUserInfosMap(Map<String, UserInfo> userInfosMap) {
- this.userInfosMap = userInfosMap;
- }
- }
package struts2jsonjquery.test.action;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;import struts2jsonjquery.test.entity.UserInfo;import com.opensymphony.xwork2.ActionSupport;public class JsonJqueryStruts2Action extends ActionSupport { private static final long serialVersionUID = 3518833679938898354L; private String message; //使用json返回单个值 private UserInfo userInfo; //使用json返回对象 private List<UserInfo> userInfosList; //使用josn返回List对象 private Map<String,UserInfo> userInfosMap; //使用json返回Map对象 /** * <p> * 返回单个值 * <p> * @return */ public String returnMessage(){ this.message = "成功返回单个值:杨金德"; return "message"; } /** * <p> * 返回UserInfo对象 * </p> * @return */ public String returnUserInfo(){ userInfo = new UserInfo(); userInfo.setUserId(10000); userInfo.setUserName("柳梦璃"); userInfo.setPassword("liumengli"); return "userInfo"; } /** * <p> * 返回List对象 * </p> * @return */ public String returnList(){ userInfosList = new ArrayList<UserInfo>(); UserInfo u1 = new UserInfo(); u1.setUserId(10000); u1.setUserName("柳梦璃"); u1.setPassword("liumengli"); UserInfo u2 = new UserInfo(); u2.setUserId(10001); u2.setUserName("韩菱纱"); u2.setPassword("hanlingsha"); UserInfo u3 = new UserInfo(); u3.setUserId(10002); u3.setUserName("云天河"); u3.setPassword("yuntianhe"); UserInfo u4 = new UserInfo(); u4.setUserId(10003); u4.setUserName("玄霄"); u4.setPassword("xuanxiao"); userInfosList.add(u1); userInfosList.add(u2); userInfosList.add(u3); userInfosList.add(u4); return "list"; } /** * <p> * 返回Map对象 * </p> * @return */ public String returnMap(){ userInfosMap = new HashMap<String,UserInfo>(); UserInfo u1 = new UserInfo(); u1.setUserId(10000); u1.setUserName("林月如"); u1.setPassword("linyueru"); UserInfo u2 = new UserInfo(); u2.setUserId(10001); u2.setUserName("赵灵儿"); u2.setPassword("zhaolinger"); UserInfo u3 = new UserInfo(); u3.setUserId(10002); u3.setUserName("李逍遥"); u3.setPassword("lixiaoyao"); UserInfo u4 = new UserInfo(); u4.setUserId(10003); u4.setUserName("女娲"); u4.setPassword("nvwa"); userInfosMap.put(u1.getUserId()+"", u1); userInfosMap.put(u2.getUserId()+"", u2); userInfosMap.put(u3.getUserId()+"", u3); userInfosMap.put(u4.getUserId()+"", u4); return "map"; } /** * <p> * 获得对象,也就是通过表达获得对象(异步的) * </P> * @return */ public String gainUserInfo(){ System.out.println("用户ID:"+userInfo.getUserId()); System.out.println("用户名:"+userInfo.getUserName()); System.out.println("密码:"+userInfo.getPassword()); return "userInfo"; } public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } public UserInfo getUserInfo() { return userInfo; } public void setUserInfo(UserInfo userInfo) { this.userInfo = userInfo; } public List<UserInfo> getUserInfosList() { return userInfosList; } public void setUserInfosList(List<UserInfo> userInfosList) { this.userInfosList = userInfosList; } public Map<String, UserInfo> getUserInfosMap() { return userInfosMap; } public void setUserInfosMap(Map<String, UserInfo> userInfosMap) { this.userInfosMap = userInfosMap; }}
struts2的配置文件也很简单,需要注意的是得把type设置为json类型。struts.xml:
[html] view plaincopyprint?
- <?xml version="1.0" encoding="UTF-8" ?>
- <!DOCTYPE struts PUBLIC
- "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
- "http://struts.apache.org/dtds/struts-2.0.dtd">
- <struts>
- <constant name="struts.custom.i18n.resources" value=http://www.mamicode.com/"UTF-8"/>
- <package name="default" namespace="/" extends="json-default">
- <action name="jsontest" class="struts2jsonjquery.test.action.JsonJqueryStruts2Action">
- <!-- 返回单个值的result -->
- <result name="message" type="json"></result>
- <!-- 返回UserInfo对象的 -->
- <result name="userInfo" type="json"></result>
- <!-- 返回List对象的 -->
- <result name="list" type="json"></result>
- <!-- 返回Map对象的 -->
- <result name="map" type="json"></result>
- </action>
- </package>
- </struts>
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "http://struts.apache.org/dtds/struts-2.0.dtd"><struts> <constant name="struts.custom.i18n.resources" value="http://www.mamicode.com/UTF-8"/> <package name="default" namespace="/" extends="json-default"> <action name="jsontest" class="struts2jsonjquery.test.action.JsonJqueryStruts2Action"> <!-- 返回单个值的result --> <result name="message" type="json"></result> <!-- 返回UserInfo对象的 --> <result name="userInfo" type="json"></result> <!-- 返回List对象的 --> <result name="list" type="json"></result> <!-- 返回Map对象的 --> <result name="map" type="json"></result> </action> </package></struts>
前台Jsp提供几个点击按钮事件,当然这个Jsp需要引入jQuer.js文件。index.jsp:
[html] view plaincopyprint?
- <%@ page language="java" pageEncoding="GBK"%>
- <%@ taglib uri="/struts-tags" prefix="s" %>
- <%
- String path = request.getContextPath();
- %>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <title>Struts2+JQuery+JSON</title>
- <meta http-equiv="pragma" content="no-cache">
- <meta http-equiv="cache-control" content="no-cache">
- <meta http-equiv="expires" content="0">
- <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
- <meta http-equiv="description" content="This is my page">
- <script type="text/javascript" src=http://www.mamicode.com/"<%=path %>/js/jquery.js"></script>
- <script type="text/javascript" src=http://www.mamicode.com/"<%=path %>/js/json.js"></script>
- </head>
- <body>
- <input id="getJsData" type="button" value=http://www.mamicode.com/"获取js值"/>
- <input id="getMessage" type="button" value=http://www.mamicode.com/"获取单个值"/>
- <input id="getUserInfo" type="button" value=http://www.mamicode.com/"获取UserInfo对象"/>
- <input id="getList" type="button" value=http://www.mamicode.com/"获取List对象"/>
- <input id="getMap" type="button" value=http://www.mamicode.com/"获取Map对象"/>
- <br>
- <br>
- <br>
- <!-- 要显示信息的层 -->
- <div id="message"></div>
- <form>
- 用户ID:<input name="userInfo.userId" type="text"/><br/>
- 用户名:<input name="userInfo.userName" type="text"/><br/>
- 密 码:<input name="userInfo.password" type="text"/><br>
- <input id="regRe" type="button" value=http://www.mamicode.com/"注册"/>
- </form>
- <s:debug/>
- </body>
- </html>
<%@ page language="java" pageEncoding="GBK"%><%@ taglib uri="/struts-tags" prefix="s" %><% String path = request.getContextPath();%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>Struts2+JQuery+JSON</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script type="text/javascript" src="http://www.mamicode.com//js/jquery.js"></script> <script type="text/javascript" src="http://www.mamicode.com//js/json.js"></script> </head> <body> <input id="getJsData" type="button" value="http://www.mamicode.com/获取js值"/> <input id="getMessage" type="button" value="http://www.mamicode.com/获取单个值"/> <input id="getUserInfo" type="button" value="http://www.mamicode.com/获取UserInfo对象"/> <input id="getList" type="button" value="http://www.mamicode.com/获取List对象"/> <input id="getMap" type="button" value="http://www.mamicode.com/获取Map对象"/> <br> <br> <br> <!-- 要显示信息的层 --> <div id="message"></div> <form> 用户ID:<input name="userInfo.userId" type="text"/><br/> 用户名:<input name="userInfo.userName" type="text"/><br/> 密 码:<input name="userInfo.password" type="text"/><br> <input id="regRe" type="button" value="http://www.mamicode.com/注册"/> </form> <s:debug/> </body></html>
最后为上面的Jsp中的按钮事件注册单击事件,这里把这些事件代码单独的放到一个json.js文件里。
[javascript] view plaincopyprint?
- //初始加载页面时
- $(document).ready(function(){
- //为获获取js值注册鼠标单击事件
- $("#getJsData").click(function(){
- $.getJSON("js/test.js",function(data){
- //通过.操作符可以从data.message中获得Action中message的值
- $("#message").html("<font color=‘red‘>用户名:"+data.name+"人生目标:"+data.job+"</font>");
- });
- });
- //为获取单个值的按钮注册鼠标单击事件
- $("#getMessage").click(function(){
- $.getJSON("jsontest!returnMessage.action",function(data){
- //通过.操作符可以从data.message中获得Action中message的值
- $("#message").html("<font color=‘red‘>"+data.message+"</font>");
- });
- });
- //为获取UserInfo对象按钮添加鼠标单击事件
- $("#getUserInfo").click(function(){
- $.getJSON("jsontest!returnUserInfo.action",function(data){
- //清空显示层中的数据
- $("#message").html("");
- //为显示层添加获取到的数据
- //获取对象的数据用data.userInfo.属性
- $("#message").append("<div><font color=‘red‘>用户ID:"+data.userInfo.userId+"</font></div>")
- .append("<div><font color=‘red‘>用户名:"+data.userInfo.userName+"</font></div>")
- .append("<div><font color=‘red‘>密码:"+data.userInfo.password+"</font></div>")
- });
- });
- //为获取List对象按钮添加鼠标单击事件
- $("#getList").click(function(){
- $.getJSON("jsontest!returnList.action",function(data){
- //清空显示层中的数据
- $("#message").html("");
- //使用jQuery中的each(data,function(){});函数
- //从data.userInfosList获取UserInfo对象放入value之中
- $.each(data.userInfosList,function(i,value){
- $("#message").append("<div>第"+(i+1)+"个用户:</div>")
- .append("<div><font color=‘red‘>用户ID:"+value.userId+"</font></div>")
- .append("<div><font color=‘red‘>用户名:"+value.userName+"</font></div>")
- .append("<div><font color=‘red‘>密码:"+value.password+"</font></div>");
- });
- });
- });
- //为获取Map对象按钮添加鼠标单击事件
- $("#getMap").click(function(){
- $.getJSON("jsontest!returnMap.action",function(data){
- //清空显示层中的数据
- $("#message").html("");
- //使用jQuery中的each(data,function(){});函数
- //从data.userInfosList获取UserInfo对象放入value之中
- //key值为Map的键值
- $.each(data.userInfosMap,function(key,value){
- $("#message").append("<div><font color=‘red‘>用户ID:"+value.userId+"</font></div>")
- .append("<div><font color=‘red‘>用户名:"+value.userName+"</font></div>")
- .append("<div><font color=‘red‘>密码:"+value.password+"</font></div>");
- });
- });
- });
- //向服务器发送表达数据
- $("#regRe").click(function(){
- //把表单的数据进行序列化
- var params = $("form").serialize();
- //使用jQuery中的$.ajax({});Ajax方法
- $.ajax({
- url:"jsontest!gainUserInfo.action",
- type:"POST",
- data:params,
- dataType:"json",
- success:function(data){
- //清空显示层中的数据
- $("#message").html("");
- //为显示层添加获取到的数据
- //获取对象的数据用data.userInfo.属性
- $("#message").append("<div><font color=‘red‘>用户ID:"+data.userInfo.userId+"</font></div>")
- .append("<div><font color=‘red‘>用户名:"+data.userInfo.userName+"</font></div>")
- .append("<div><font color=‘red‘>密码:"+data.userInfo.password+"</font></div>")
- }
- });
- });
- });
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。