Struts2(十六)Json

浏览数：21 / 时间：2015年06月09日

一、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
 */
$(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请求失败");
            }
                
            });    
            });
        });