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);
                }