Struts2(十六)Json

2019-11-14 23:38:19

字體：大中小

供稿：網(wǎng)友

Struts2(十六)Json一、JSON

Json就是瀏覽器和服務(wù)器之間交換數(shù)據(jù)的一種輕量級(jí)對(duì)象

javaSctipt中類似的對(duì)象操作

$(function() {            var person = {                "name" : "張三",                "age" : 21,                "wife" : "李四"            };            $("#msg").append("姓名:" + person.name+"<br/>").append("年齡:" + person.age+"<br/>")                    .append("老婆:" + person.wife+"<br/>");        })

二、一個(gè)小例子

<%@ 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測(cè)試</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與字符串轉(zhuǎn)換" /><br/><input id="btn2" type="button" value="字符串與JSON轉(zhuǎn)換" /></body></html>

$(function() {    // json對(duì)象    var person = {        "name" : "張三",        "age" : 21,        "wife" : "李四"    };    $("#msg").append("姓名:" + person.name + "<br/>").append("年齡:" + person.age            + "<br/>").append("老婆:" + person.wife + "<br/>");    // 數(shù)組    var arr1 = ["廣東", "廣西", "湖南", "湖北", "江西"]    // 使用循環(huán)遍歷    for (var i = 0; i < arr1.length; i++) {        $("#msg2").append(arr1[i] + " ");    }    // 對(duì)象數(shù)組    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和字符串轉(zhuǎn)換    $("#btn").bind("click",function(){        alert(JSON.stringify(users))        alert(typeof JSON.stringify(users))    })    //將字符串轉(zhuǎn)換為對(duì)象    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)    })            })

三、服務(wù)器端設(shè)置和客戶端使用Ajax請(qǐng)求

<param name="exclude3.1、Ajax實(shí)現(xiàn)取重服務(wù)器端的數(shù)據(jù)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">    <!--默認(rèn)返回Action中全部數(shù)據(jù) 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("獲取數(shù)據(jù)失敗");                            }                        });            });        });
頁面
<input type="button" id="btn" value="Ajax獲取Json" /><div id="msg"></div>
四、返回對(duì)象和集合時(shí)
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">    默認(rèn)返回Action中全部數(shù)據(jù) param可以指定下要傳的元素      <param name="includeProperties">    name,pwd,age    </param>    </result>    </action>    <action name="getUser" class="com.pb.web.action.DataAction" method="getUserString">    <result type="json"><!--     默認(rèn)返回Action中全部數(shù)據(jù) param可以指定下要傳的元素      <param name="root"> ajax接收直接data.屬性就可以    user    </param> -->    <param name="includeProperties">user.*</param>    <!--  使用 對(duì)象.*時(shí)接收時(shí)ajax要用 date.user.屬性才可以-->    </result>    </action>    <action name="getUsers" class="com.pb.web.action.DataAction" method="getUsersString">    <result type="json">    <!-- 默認(rèn)返回Action中全部數(shù)據(jù) param可以指定下要傳的元素   -->    <!--  --><!--  ajax接收直接 data.length遍歷時(shí)取值使用data[i].屬性就可以 --><!--     <param name="root">    users    </param>  -->     <param name="includeProperties">users.*</param>    <!--  使用 對(duì)象.*時(shí)接收時(shí)ajax要用 date.users.length 取值時(shí)使用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("獲取數(shù)據(jù)失敗");                    }                });    });    // 獲取用戶對(duì)象    $("#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("獲取數(shù)據(jù)失敗");                    }                });    });    // 獲取對(duì)象集合    $("#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("獲取數(shù)據(jù)失敗");                    }                });    });});
五、無刷新頁頁登錄和注銷
package com.pb.entity;/* * 用戶實(shí)體類 */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;                //登錄的驗(yàn)證方法        public String login(){            if(user.getUsername().equals("accp")&&user.getPassword().equals("accp")){                //如果用戶名和密碼都正確，將這個(gè)用戶放入Session中                session.put("u", user);                flag=true;            }else{                flag=false;            }                        return SUCCESS;        }        /*         * 退出         */        public String logout(){            session.remove("user");            return SUCCESS;        }                //實(shí)現(xiàn)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("用戶名或者密碼錯(cuò)誤 !").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請(qǐng)求失敗");            }                            });                });        });