Json注解定制返回数据的格式和Query的Ajax请求

json:

JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。

 

在标准的json格式中，json对象由在括号括起来，对象中的属性也就是json的key是一个字符串，所以一定要使用双引号引起来。每组key之间使用逗号进行分隔。

Json定义格式：
var 变量名 = {
“key” : value ,         // Number类型
“key2” : “value” ,         // 字符串类型
“key3” : [] ,             // 数组类型
“key4” : {},             // json 对象类型
“key5” : [{},{}]         // json 数组
};

1.4、JSON在java中的使用(****重点)

我们要使用json和java中使用，我们需要使用到一个第三方的包。它就是gson.jar。

Gson 是 Google 提供的用来在 Java 对象和 JSON 数据之间进行映射的 Java 类库。可以将一个 JSON 字符串转成一个 Java 对象，或者反过来。

 

json在java中的操作。常见的有三种情况。

 

1、java对象和json的转换

2、java对象list集合和json的转换

3、map对象和json的转换

 

package com.atguigu.gson;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;

public class GsonTest {

    static class Person {
        private int age;
        private String name;

        public Person() {
            // TODO Auto-generated constructor stub
        }

        public Person(int age, String name) {
            this.age = age;
            this.name = name;
        }

        public int getAge() {
            return age;
        }

        public void setAge(int age) {
            this.age = age;
        }

        public String getName() {
            return name;
        }

        public void setName(String name) {
            this.name = name;
        }

        @Override
        public String toString() {
            return "Person [age=" + age + ", name=" + name + "]";
        }

    }

    // 要把复杂的json字符串转换成为java对象。需要继承TypeToken类。
    // 并把返回的类型当成TypeToken的泛型注入
    static class PersonType extends TypeToken<List<Person>> {
    }

    public static void main(String[] args) {
        // json操作，一定要先new一个gson对象。
        Gson gson = new Gson();
        // java对象--json
        Person person = new Person(12, "wzg168");
        // 把对象转成为json字符串
        String personjson = gson.toJson(person);

        System.out.println(personjson);
        // 把json字符串转换成为java对象
        Person p = gson.fromJson(personjson, Person.class);
        System.out.println(p);
        System.out.println("------------------------------------------");
        // 2、java对象list集合和json的转换
        List<Person> list = new ArrayList<Person>();
        for (int i = 0; i < 3; i++) {
            list.add(new Person(10 * i, "name-" + i));
        }
        String jsonListString = gson.toJson(list);
        System.out.println(jsonListString);

        // 把json数组转换成为List对象
        // List<Person> ps = gson.fromJson(jsonListString, new PersonType().getType());
        // 我们也可以使用匿名内部类
        List<Person> ps = gson.fromJson(jsonListString, new TypeToken<List<Person>>() {
        }.getType());
        System.out.println(ps);
        System.out.println("------------------------------------------");

        // 3、map对象和json的转换
        Map<String, Person> mapPerson = new HashMap<String, GsonTest.Person>();
        // 添加person到map中
        mapPerson.put("p1", new Person(1, "person-1"));
        mapPerson.put("p2", new Person(2, "person-2"));
        // 把map转换成为json对象
        String jsonMapString = gson.toJson(mapPerson);
        System.out.println(jsonMapString);
        // 通过使用匿名内部类的方式
        Map<String, Person> map = gson.fromJson(jsonMapString,
                new TypeToken<HashMap<String, Person>>() {}.getType());
        System.out.println(map);
    }
}

 

/**
     * 将重复操作提取出来
     * 把json字符串转换成为java对象List
     */
    public static List<String> convertJSONToList(String json){
        
        //fromJson(String json, Class<T> classOfT)
        //json the string from which the object is to be deserialized
        //这里json是字符串，字符串内为一个json对象
        //String json = "['aa','bb','cc','dd']";第二个参数javaBean时参考例子获取class
        List<String> list = gson.fromJson(json, List.class);
        return list;
    }

 

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

ajax是一种浏览器异步发起请求。局部更新页面的技术。

Query的Ajax请求(重点****)

 

四个Ajax请求方法

$.ajax方法

$.get方法

$.post方法

$.getJSON方法

 

一个表单序列化方法：serialize()表单序列化方法

 

 

如何使用上面的五个方法：

在JQuery中和Ajax请求有关的方法有四个

$.ajax请求参数

url：                                  请求的地址

type :                         请求的方式             get或post

data :                         请求的参数             string或json

success:                    成功的回调函数

dataType:                  返回的数据类型      常用json或text

 

下面的方法必须遵守参数的顺序

$.get请求和$.post请求

url:请求的URL地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

type:返回内容格式，xml, html, script, json, text。

 

 

Jquery的$.getJSON

url:待载入页面的URL地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

 

表单的序列化

serialize() 方法可以把一个form表单中所有的表单项。都以字符串name=value&name=value的形式进行拼接，省去我们很多不必要的工作。

由于$.get、$.post和getJSON这三个方法的底层都是直接或者间接地使用$.ajax()方法来实现的异步请求的调用。所以我们以$.ajax()方法的使用为示例进行展示：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="pragma" content="no-cache" />
        <meta http-equiv="cache-control" content="no-cache" />
        <meta http-equiv="Expires" content="0" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(function(){
                // ajax请求
                $("#ajaxBtn").click(function(){
                    $.ajax({
                        url : "ajaxServlet", // 请求地址
                        error:function(){   // 请求失败回调
                            alert("请求失败");
                        },
                        success:function(data){ // 请求成功回调
                            alert( data );
                        },
                        type:"POST",                // 请求的方式
                        dataType:"json",            // 返回的数据类型为json对象
                        data:{                        // 请求的参数
                            action:"jqueryAjax",
                            a:12,
                            date: new Date()
                        }
                    });
                });

                // ajax--get请求
                $("#getBtn").click(function(){
                    $.get(
                        "ajaxServlet",{
                            action:"jqueryGet",
                            a:12,
                            date:new Date()
                        },function(data){alert(data);},"json"
                    );
                });
                
                // ajax--post请求
                $("#postBtn").click(function(){
                    // post请求
                    $.post(
                        "ajaxServlet", // 请求路径
                        {                // 请求参数
                            action:"jqueryPost",
                            a:12,
                            date:new Date()
                        },
                        function(data){ alert( data ) },  // 成功的回调函数
                        "text"                            // 返回的数据类型
                    );
                });

                // ajax--getJson请求
                $("#getJsonBtn").click(function(){
                    // 调用
                    $.getJSON(
                        "ajaxServlet",         // 请求路径
                        {                    // 请求参数
                            action:"jqueryGetJSON",
                            a:12,
                            date:new Date()
                        }, 
                        function(data){ alert( data ) }  // 成功的回调函数        
                    );
                });

                // ajax请求
                $("#submit").click(function(){
                    // 把参数序列化
                    var data = $("#form01").serialize();
                    alert(data);
                });
                
            });
        </script>
    </head>
    <body>
        <div>
            <button id="ajaxBtn">$.ajax请求</button>
            <button id="getBtn">$.get请求</button>
            <button id="postBtn">$.post请求</button>
            <button id="getJsonBtn">$.getJSON请求</button>
        </div>
        <br/><br/>
        <form id="form01" >
            用户名：<input name="username" type="text" /><br/>
            密码：<input name="password" type="password" /><br/>
            下拉单选：<select name="single">
                  <option value="Single">Single</option>
                  <option value="Single2">Single2</option>
            </select><br/>
              下拉多选：
              <select name="multiple" multiple="multiple">
                <option selected="selected" value="Multiple">Multiple</option>
                <option value="Multiple2">Multiple2</option>
                <option selected="selected" value="Multiple3">Multiple3</option>
              </select><br/>
              复选：
             <input type="checkbox" name="check" value="check1"/> check1
             <input type="checkbox" name="check" value="check2" checked="checked"/> check2<br/>
             单选：
             <input type="radio" name="radio" value="radio1" checked="checked"/> radio1
             <input type="radio" name="radio" value="radio2"/> radio2<br/>
             <input id="submit" type="submit" />
        </form>            
    </body>
</html>

 

package com.atguigu.servlet;
import java.io.IOException;
import java.util.Random;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.atguigu.gson.GsonTest;
import com.google.gson.Gson;

public class AjaxServlet extends BaseServlet {
    private static final long serialVersionUID = 1L;

    protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        System.out.println("ajax请求过来了 a--" + request.getParameter("a"));
        Random random = new Random(System.currentTimeMillis());
        // 使用随机数，可以让客户端看到变化
        response.getWriter().write(
                new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));
    }
    
    protected void jqueryAjax(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        System.out.println("jqueryAjax请求过来了 a--" + request.getParameter("a"));
        Random random = new Random(System.currentTimeMillis());
        // 使用随机数，可以让客户端看到变化
        response.getWriter().write(
                new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));
    }
    
    protected void jqueryGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        System.out.println("jqueryGet请求过来了 a--" + request.getParameter("a"));
        Random random = new Random(System.currentTimeMillis());
        // 使用随机数，可以让客户端看到变化
        response.getWriter().write(
                new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));
    }
    
    protected void jqueryPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        System.out.println("jqueryPost请求过来了 a--" + request.getParameter("a"));
        Random random = new Random(System.currentTimeMillis());
        // 使用随机数，可以让客户端看到变化
        response.getWriter().write(
                new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));
    }
    
    protected void jqueryGetJSON(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        System.out.println("jqueryGetJSON请求过来了 a--" + request.getParameter("a"));
        Random random = new Random(System.currentTimeMillis());
        // 使用随机数，可以让客户端看到变化
        response.getWriter().write(
                new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));
    }

}

 

springMVC中json的使用

①加入jackson依赖

<dependency>

     <groupId>org.codehaus.jackson</groupId>

     <artifactId>jackson-mapper-asl</artifactId>

     <version>1.9.11</version>

</dependency>

②将封装响应数据的对象作为Handler方法的返回值

③在Handler方法上加@ResponseBody注解

　　 @ResponseBody//将返回值设置为json格式，这里是map转json
    @RequestMapping(value="/manager/res/toggleStatus" )
    public  Map<String, Object> toggleStatus(@RequestParam(value="resId") Integer resId){
        //
        String result=null;
        System.err.println("1234..................");
        //执行目标操作
        try{
            resService.toggleStatus(resId);
            result="success";
        }catch(Exception e){
            result="failed";
            e.printStackTrace();            
        }
        
        Map<String, Object> map= new HashMap<>();
        map.put("result", result);
        return map;//实际格式 json对象={“result”：“success”}字符串类型

    }

 

jsp页面：采用的是JQuery下面的函数

$.post----都是一样的，但
$.get、$.post和getJSON这三个方法的底层都是直接或者间接地使用$.ajax()方法来实现的异步请求的调用。
但$.get、$.post方法必须遵守参数的顺序
AJAX其实就是发送连接到Handler处理完毕后用其callback函数处理表单

 
    $(function(){
        //alert("1");
        /* 匹配所有按钮 */
        $(":button").click(function(){
            alert("2");
            var thisBtn =this;
            //在单击响应函数中获取当前点击的按钮对应的resId
            var resId=thisBtn.id
            
            //获取地址数据
            var url="${pageContext.request.contextPath}/manager/res/toggleStatus";
            //nuber数据，time防止浏览器使用本地缓存，每次数据都不一样
            var data={"resId":resId,"time":new Date()};
            //返回内容格式
            var type="json";
            //callback回调函数,以map的形式返回json
             var callback = function(respData){
                 
                var result=respData.result;
                alert(result);
                if(result=="success"){
                    var oldValue=thisBtn.value;
                    if(oldValue=="公共资源"){
                        thisBtn.value = "受保护资源";
                    }
                    if(oldValue=="受保护资源"){
                        thisBtn.value = "公共资源";
                    }
                }
                if(result == "failed") {
                    //alert("操作失败！");
                }
               };
        //$.post请求
         $.post(url,data,callback,type);
        });
    });

 

 

今天涉及到ajax时，因为用另外写的html页面进行测试（其实这已经是跨域调用了），导致了跨域问题。

出现以下错误：

Access-Control-Allow-Origin 解决跨域权限问题

总结一个ajax的后台程序如下，后面用到就直接用ok.

 

@RequestMapping(value="/dictionary/column/json",method=RequestMethod.POST)
    public void queryColumn2(HttpServletResponse response,String tableName) throws IOException{
        //json处理
        Gson gson = new Gson();
        
        List list = columnService.query();

        //转化为json字符串
        String jsonListString = gson.toJson(list);

        //设置response输出格式，防止乱码
        response.setContentType("text/plain");
        response.setHeader("Cache-Control", "no-cache");
        response.setCharacterEncoding("UTF-8");
        response.getWriter().write(jsonListString);
        
        System.err.println("tableName:"+tableName);
    }

 

 

 

 

$.post(
                "http://localhost:8080/oa/data/dictionary/column/json.do"
                , {"tableName": tableName}
                , function (data) {
                    var jsonObj = JSON.parse(data);//将json字符串转为json对象
                   alert(jsonObj);
                }