1. 程式人生 > >異步請求獲取JSON數據

異步請求獲取JSON數據

scrip rom java對象 ring shm nta js對象 對象 writer

json格式的數據廣泛應用於異步請求中前後端的數據交互,本文主要介紹幾種使用場景和使用方法。

 1 <input type="button" id="testBtn" value="測試按鈕" onclick="sentAjax();"/><br> 3 <script type="text/javascript">
 4 function sentAjax(){
 5     $.ajax({
 6           type: POST,
 7           url:"<%=basePath%>/manage/test/ajax
", 8 dataType : "json", 9 success: function(result){ 10         //這裏result是一個符合json格式的js對象 11 //alert(result.name); 12 //alert(result[0].name); 13 //alert(result.listUser[0].name); 14 15 } 16 }); 17 }
18 </script>

java代碼

 1 @RequestMapping(value = "/ajax")
 2     public void testAjax(HttpServletRequest request, HttpServletResponse response){
 3         
 4        try {
 5             String jsonStr1 = "{\"name\":\"張三\",\"age\":23}";
 6             String jsonStr2 = "[{\"name\":\"張三\",\"age\":1},{\"name\":\"李四\",\"age\":24}]";
7 String jsonStr3 = "{\"listUser\": [{\"name\":\"張三\",\"age\":1},{\"name\":\"李四\",\"age\":24}] }"; 8 response.setCharacterEncoding("utf-8");//響應字符集的編碼格式 9 response.getWriter().print(jsonStr3); 10 } catch (IOException e) { 11 e.printStackTrace(); 12 } 13 }

另外使用spring的@ResponseBody這個註解的話還可以這樣寫

 1 @RequestMapping("/ajax")
 2 @ResponseBody
 3 public Object testAjax1(HttpServletRequest request, HttpServletResponse response){
 4         
 5         String jsonStr1 = "{\"name\":\"張三\",\"age\":23}";
 6         String jsonStr2 = "[{\"name\":\"張三\",\"age\":1},{\"name\":\"李四\",\"age\":24}]";
 7         String jsonStr3 = "{\"listUser\": [{\"name\":\"張三\",\"age\":1},{\"name\":\"李四\",\"age\":24}] }";
 8         
 9        return jsonStr1;
10         
11     }

二,java對象

@RequestMapping(value = "/ajax")
    public void testAjax2(HttpServletRequest request, HttpServletResponse response){
        
       try {
            User user = new User();
            user.setName("張三");
            user.setAge(23);
            JSONObject jsonObject =  JSONObject.fromObject(user);
            response.setCharacterEncoding("utf-8");//響應字符集的編碼格式
            response.getWriter().print(jsonObject.toString());
        } catch (IOException e) {
            e.printStackTrace();
        }
        
        
    }

使用以上的方式的話要先把java對象轉換成json格式的字符串。

下面使用springmvc的@ResponseBody這個註解,也是在springmvc的web項目開發中經常用到的。

    @RequestMapping(value = "/ajax")
    @ResponseBody
    public Object testAjax3(HttpServletRequest request, HttpServletResponse response){
            User user = new User();
            user.setName("張三");
            user.setAge(23);
            return user;
    }

在這裏@ResponseBody這個註解對於json格式數據的解析用到了jackson這個框架另外它對響應對象response進行了封裝,這讓我們在異步請求中使用json格式的數據進行數據交互更加的方便。它的實現原理如下:

 1 @RequestMapping(value = "/ajax4")
 2     public void testAjax4(HttpServletRequest request, HttpServletResponse response){
 3         
 4        try {
 5             User user = new User();
 6             user.setName("張三");
 7             user.setAge(23);
 8             ObjectMapper mapper = new ObjectMapper();
 9             String userStr = mapper.writeValueAsString(user);
10             response.setCharacterEncoding("utf-8");//響應字符集的編碼格式
11             response.getWriter().print(userStr);
12         } catch (IOException e) {
13             e.printStackTrace();
14         }
15     }

另外在使用json格式數據交互時如有以下用法:

 1 @RequestMapping(value = "/ajax5")
 2     @ResponseBody
 3     public Object testAjax5(HttpServletRequest request, HttpServletResponse response){
 4         
 5             Map<String,Object> jsonMap = new HashMap();
 6             String jsonStr1 = "{\"name\":\"張三\",\"age\":23}";
 7             jsonMap.put("json", jsonStr1);
 8             
 9             return jsonMap;      
10     }

前端應該這麽寫

<script type="text/javascript">
function sentAjax(){
    $.ajax({
          type: POST,
          url:"<%=basePath%>/manage/test/ajax5",
          dataType : "json",
          success: function(result){
          //result.json取到的只是map在前端轉換成json格式js對象時key為‘json‘對應的字符串的值,在前段json格式的字符串轉換成json格式js對象推薦使用 JSON.parse()這個函數。
              var jsonStr = JSON.parse(result.json);
              alert(jsonStr.name)
          }
        });
 }
</script>

異步請求獲取JSON數據