Json就是瀏覽器和服務器之間交換數據的一種輕量級對象
$(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="exclude3.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請求失敗"); } }); }); });
新聞熱點
疑難解答
