一、JSON
Json就是浏览器和服务器之间交换数据的一种轻量级对象
javaSctipt中类似的对象操作
$(function() { var person = { "name" : "张三", "age" : 21, "wife" : "李四" }; $("#msg").append("姓名:" + person.name+"<br/>").append("年龄:" + person.age+"<br/>") .append("老婆:" + person.wife+"<br/>"); })
二、一个小例子
<%@ 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>json测试</title> <script type="text/javascript" src="js/jquery-1.8.2.js"></script> <script type="text/javascript" src="js/jsonDemo.js"></script> <style type="text/css"> td { border: 1px solid blue; width:100px; } </style> </head> <body> <div id="msg"></div> <div id="msg2"></div> <div id="msg3"></div> <input id="btn" type="button" value="JSON与字符串转换" /><br/> <input id="btn2" type="button" value="字符串与JSON转换" /> </body> </html>
$(function() { // json对象 var person = { "name" : "张三", "age" : 21, "wife" : "李四" }; $("#msg").append("姓名:" + person.name + "<br/>").append("年龄:" + person.age + "<br/>").append("老婆:" + person.wife + "<br/>"); // 数组 var arr1 = ["广东", "广西", "湖南", "湖北", "江西"] // 使用循环遍历 for (var i = 0; i < arr1.length; i++) { $("#msg2").append(arr1[i] + " "); } // 对象数组 var users = [{ "name" : "张三", "pwd" : "123qwe", "age" : 21 }, { "name" : "李四", "pwd" : "asdf", "age" : 22 }, { "name" : "王五", "pwd" : "fsde", "age" : 23 }, { "name" : "赵六", "pwd" : "zcxe", "age" : 24 }]; $("#msg3").append("<table>"); for (var i = 0; i < users.length; i++) { $("#msg3").append("<tr>").append("<td>" + users[i].name + "</td>").append("<td>" + users[i].pwd + "</td>").append("<td>" + users[i].age + "</td>").append("</tr>"); } $("#msg3").append("</table>"); // json和字符串转换 $("#btn").bind("click",function(){ alert(JSON.stringify(users)) alert(typeof JSON.stringify(users)) }) //将字符串转换为对象 var str='{"name":"张三丰","pwd":"qwer","age":123}' $("#btn2").bind("click",function(){ alert(JSON.parse(str).name); //显示类型为string alert(typeof JSON.parse(str).name) alert(JSON.parse(str).pwd); alert(typeof JSON.parse(str).pwd) alert(JSON.parse(str).age); //显示类型为number alert(typeof JSON.parse(str).age) }) })
三、服务器端设置和客户端使用Ajax请求
<param name="excludeProperties" >不包含的元素 </param> <param name="includeProperties" >包含的元素 </param> <param name="root"> person.job 字段或者对象 </param>
3.1、Ajax实现取重服务器端的数据
package com.pb.web.action; import com.opensymphony.xwork2.ActionSupport; public class DataAction extends ActionSupport { private String name; private String pwd; private Integer age; public String getData(){ name="张三丰"; pwd="太极宗师108"; age=108; return SUCCESS; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getPwd() { return pwd; } public void setPwd(String pwd) { this.pwd = pwd; } public Integer getAge() { return age; } public void setAge(Integer age) { this.age = age; } }
struts.xml
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts-2.3.dtd"> <struts> <constant name="struts.enable.DynamicMethodInvocation" value="false" /> <constant name="struts.devMode" value="true" /> <package name="default" namespace="/" extends="json-default"> <action name="getData" class="com.pb.web.action.DataAction" method="getData"> <result type="json"> <!--默认返回Action中全部数据 param可以指定下要传的元素 --> <param name="includeProperties"> name,pwd,age </param> </result> </action> </package> </struts>
javascript
$(function() { $("#btn").click(function() { $.ajax({ url : "getData", type : "post", data : null, dataType : "json", success : function(data) { $("#msg").html(""); $("#msg").append("姓名:" + data.name + "<br/>") .append("密码:" + data.pwd + "<br/>") .append("年龄:" + data.age + "<br/>") }, error : function() { $("#msg").html(""); $("#msg").html("获取数据失败"); } }); }); });
页面
<input type="button" id="btn" value="Ajax获取Json" /> <div id="msg"></div>
四、返回对象和集合时
package com.pb.web.action; import java.util.ArrayList; import java.util.List; import com.opensymphony.xwork2.ActionSupport; import com.pb.entity.User; public class DataAction extends ActionSupport { private String name; private String pwd; private Integer age; private User user; private List<User> users; public String getData(){ name="张三丰"; pwd="太极宗师108"; age=108; return SUCCESS; } public String getUserString(){ user=new User(1, "乔丹", "123", 40); return SUCCESS; } public String getUsersString(){ users=new ArrayList<User>(); users.add(new User(1, "乔丹", "123", 40)); users.add(new User(2, "科比", "123", 36)); users.add(new User(3, "C罗", "123", 25)); return SUCCESS; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getPwd() { return pwd; } public void setPwd(String pwd) { this.pwd = pwd; } public Integer getAge() { return age; } public void setAge(Integer age) { this.age = age; } public User getUser() { return user; } public void setUser(User user) { this.user = user; } public List<User> getUsers() { return users; } public void setUsers(List<User> users) { this.users = users; } }
struts.xml
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts-2.3.dtd"> <struts> <constant name="struts.enable.DynamicMethodInvocation" value="false" /> <constant name="struts.devMode" value="true" /> <package name="default" namespace="/" extends="json-default"> <action name="getData" class="com.pb.web.action.DataAction" method="getData"> <result type="json"> 默认返回Action中全部数据 param可以指定下要传的元素 <param name="includeProperties"> name,pwd,age </param> </result> </action> <action name="getUser" class="com.pb.web.action.DataAction" method="getUserString"> <result type="json"> <!-- 默认返回Action中全部数据 param可以指定下要传的元素 <param name="root"> ajax接收直接data.属性就可以 user </param> --> <param name="includeProperties">user.*</param> <!-- 使用 对象.*时接收时ajax要用 date.user.属性才可以--> </result> </action> <action name="getUsers" class="com.pb.web.action.DataAction" method="getUsersString"> <result type="json"> <!-- 默认返回Action中全部数据 param可以指定下要传的元素 --> <!-- --><!-- ajax接收直接 data.length遍历时取值使用data[i].属性就可以 --> <!-- <param name="root"> users </param> --> <param name="includeProperties">users.*</param> <!-- 使用 对象.*时接收时ajax要用 date.users.length 取值时使用date.users[i].属性才可以 --> </result> </action> </package> </struts>
javascript
$(function() { $("#btn").click(function() { $.ajax({ url : "getData", type : "post", data : null, dataType : "json", success : function(data) { $("#msg").html(""); $("#msg").append("姓名:" + data.name + "<br/>") .append("密码:" + data.pwd + "<br/>") .append("年龄:" + data.age + "<br/>") }, error : function() { $("#msg").html(""); $("#msg").html("获取数据失败"); } }); }); // 获取用户对象 $("#btn2").click(function() { $.ajax({ url : "getUser", type : "post", data : null, dataType : "json", success : function(data) { $("#msg2").html(""); $("#msg2").append("ID:" + data.user.id + "<br/>") .append("姓名:" + data.user.username + "<br/>") .append("密码:" + data.user.password + "<br/>") .append("年龄:" + data.user.age + "<br/>") }, error : function() { $("#msg2").html(""); $("#msg2").html("获取数据失败"); } }); }); // 获取对象集合 $("#btn3").click(function() { $.ajax({ url : "getUsers", type : "post", data : null, dataType : "json", success : function(data) { $("#msg3").html(""); $("#msg3").append("<tabel>"); for (var i = 0; i < data.users.length; i++) { $("#msg3") .append("<tr>") .append("<td>" + data.users[i].id + "</td>") .append("<td>" + data.users[i].username + "</td>") .append("<td>" + data.users[i].password + "</td>") .append("<td>" + data.users[i].age + "</td>").append("</tr>"); } $("#msg3").append("<tabel>"); }, error : function() { $("#msg3").html(""); $("#msg3").html("获取数据失败"); } }); }); });
五、无刷新页页登录和注销
package com.pb.entity; /* * 用户实体类 */ public class User { private String username; private String password; public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } }
package com.pb.web.action; import java.util.Map; import org.apache.struts2.interceptor.SessionAware; import com.opensymphony.xwork2.ActionSupport; import com.pb.entity.User; public class UserAction extends ActionSupport implements SessionAware { private User user; private Map<String, Object> session; private boolean flag; //登录的验证方法 public String login(){ if(user.getUsername().equals("accp")&&user.getPassword().equals("accp")){ //如果用户名和密码都正确，将这个用户放入Session中 session.put("u", user); flag=true; }else{ flag=false; } return SUCCESS; } /* * 退出 */ public String logout(){ session.remove("user"); return SUCCESS; } //实现sesssionAware接口的方法 @Override public void setSession(Map<String, Object> session) { this.session=session; } public User getUser() { return user; } public void setUser(User user) { this.user = user; } public Map<String, Object> getSession() { return session; } public boolean isFlag() { return flag; } public void setFlag(boolean flag) { this.flag = flag; } }
struts.xml
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts-2.3.dtd"> <struts> <constant name="struts.enable.DynamicMethodInvocation" value="false" /> <constant name="struts.devMode" value="true" /> <package name="default" namespace="/" extends="json-default"> <action name="login" class="com.pb.web.action.UserAction" method="login"> <result type="json"> <param name="includeProperties"> flag,user.* </param> </result> </action> <action name="logout" class="com.pb.web.action.UserAction" method="logout"> <result type="json"> <param name="includeProperties"> null </param> </result> </action> </package> </struts>
页面
<%@ 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>登录页面</title> <script type="text/javascript" src="js/jquery-1.8.2.js"></script> <script type="text/javascript" src="js/loginDemo.js"></script> </head> <body> <div id="loginDiv"> 用户名:<input type="text" name="name" /><br/> 密码:<input type="password" name="password"/><br/> <input type="button" value="登录" id="loginbtn" /> <span id="msg"></span> </div> </body> </html>
js
/** * 登录页面js */ $(function() { $("#loginbtn").click(function() { var params = { "user.username" : $("input[name='name']").val(), "user.password" : $("input[name='password']").val() } $.ajax({ url : "login.action", type : "post", data : params, dataType : "json", success : function(data) { // alert(data.flag); if (data.flag == true) { $("#loginDiv") .html("") .append("欢迎您!") .append(data.user.username) .append("<input id='logoutbtn' type='button' value='注销' />") } else { $("#msg").html("") $("#msg").append("用户名或者密码错误 !").css( "color", "#FF0000") } }, error : function() { $("#msg").html("") $("#msg").append("登录异常!").css("color", "#FF0000"); } }); }); $("#logoutbtn").live("click",function(){ $.ajax({ url:"logout", type:"post", dataType:"json", success:function(data){ //alert(JSON.stringify(data)); $("#loginDiv").html(""); $("#loginDiv").append('用户名：<input type="text" id="username" value="">密码：<input type="password" id="password" value=""><input type="button" value="登录" id="btn"><span id="msg"></span>'); }, error:function(){ alert("ajax请求失败"); } }); }); });