servlet與ajax數據交換（json格式）

本文轉載自查看原文 2018-04-20 19:13 4302 Java語言/ Web前端/ servlet/ ajax

JSON數據格式：

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。易於人閱讀和編寫。同時也易於機器解析和生成。它基於的一個子集。 JSON采用完全獨立於語言的文本格式，但是也使用了類似於C語言家族的習慣（包括C, C++, C#, Java, JavaScript, Perl, Python等）。這些特性使JSON成為理想的數據交換語言。

JSON建構於兩種結構：

（1）“名稱/值”對的集合（A collection of name/value pairs）。不同的語言中，它被理解為對象（object），紀錄（record），結構（struct），字典（dictionary），哈希表（hash table），有鍵列表（keyed list），或者關聯數組（associative array）。

（2）值的有序列表（An ordered list of values）。在大部分語言中，它被理解為數組（array）。

JSON具體的表現形式：

（1）對象是一個無序的“‘名稱/值’對”集合。一個對象以“{”（左括號）開始，“}”（右括號）結束。每個“名稱”后跟一個“:”（冒號）；“‘名稱/值’ 對”之間使用“,”（逗號）分隔。

例：{“name”：“zhangsan”} //單屬性或者多個屬性 {“name”：“lisi”，“sex”：“男” } // 具體對象

（2）數組是值（value）的有序集合。一個數組以“[”（左中括號）開始，“]”（右中括號）結束。值之間使用“,”（逗號）分隔。

例： ["value1","value2","value3"] //數組形式 [{“name”：“zhangsan1”},{“name”：“zhangsan2”},{“name”：“zhangsan3”}] //對象數組

Servlet與前端ajax的數據交互:

主要流程為前端獲取數據通過ajax的異步傳輸傳至servlet，servlet處理數據后，通過response回傳至前端頁面。

注意：一般在傳輸過程中會遇到兩個比較常見的問題，第一就是傳回前端時亂碼問題，這個問題可以通過在servlet處理方法中加入：response.setCharacterEncoding("UTF-8"）解決；第二就是傳至前端后，不會觸發ajax中的回調函數，原因是因為servlet傳回的json數據格式不合法而沒有觸發ajax的success狀態。

關於servlet返回的json數據處理方法：

（1）自己拼接json字符串（出錯率較高），使其數據滿足json格式

JSON對於servlet處理格式要求，鍵必須加雙引號，值分為字符串和數字，數字可不加引號，字符串必須加引號

例： {“"name"："zhansan", "age"：13, "sex"："男" } // 這種為標准格式，字符串類型加引號，純數字可不加

將一個獨立對象轉為以上的格式的字符串形式，才可以通過response.getWrite.append()傳至前端 ajax 中，成功處罰回調函數

String result = "{"+"/"name/""+":"+"/""+name+"/""+","+"/"age/""+":"+"/""+age+"/""+","+"/"sex/""+":"+"/""+sex+"/""+"}";

（2）調用第三方封裝好的 json 數據轉換方法（個人使用的是Gson，鏈接地址：https://pan.baidu.com/s/1Yu91BYlqoJSXpzk37ZXZ6g）

建議使用這種方法，高效，簡潔，適用於各種數據集合（list，map等）。詳細使用可看下列實例（具體代碼1）。

具體實例代碼1（采用第一種字符串拼接方式）

前端html部分（含ajax）

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 4 <title>Insert title here</title>
 5 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
 6 </head>
 7 <body>
 8     <div class="box">
 9           <table>
10             <tr>
11               <td>姓名</td>
12               <td><input name="username" type="text"></td>
13             </tr>
14             <tr>
15               <td>性別</td>
16               <td><input name="sex" type="text"></td>
17             </tr>  
18             <tr>
19               <td>年齡</td>
20               <td><input name="age" type="text"></td>
21             </tr>  
22             <tr>
23               <td>手機號</td>
24               <td><input name="phone" type="text"></td>
25             </tr>    
26             <tr><td><button>提交</button></td></tr>
27           </table>   
28     </div>
29       <div>
30       <table>
31                                  信息返回
32             <tr>
33               <td>姓名</td>
34               <td id="name"></td>
35             </tr>
36             <tr>
37               <td>性別</td>
38               <td id="sex"></td>
39             </tr>  
40             <tr>
41               <td>年齡</td>
42               <td id="age"></td>
43             </tr>  
44             <tr>
45               <td>手機號</td>
46               <td id="phone"></td>
47             </tr>    
48           </table>  
49     </div>  
50     <script>
51       $(function(){
52             $("button").click(function(){  
53                 $.post("AjaxTest",
54                         {'username':$("input[name=username]").val(),
55                          'sex':$("input[name=sex]").val(),
56                          'age':$("input[name=age]").val(),
57                          'phone':$("input[name=phone]").val()},
58                         function(data,textStatus){
59                              console.log(textStatus); 
60                              console.log(data.username);
61                             $("#name").html(data.username);
62                             $("#sex").html(data.sex);
63                             $("#age").html(data.age);
64                             $("#phone").html(data.phone); 
65                         },"json");
66           });
67          
68        })
69     </script>
70 </body>
71 </html>

后端servlet部分（字符串拼接）

servlet部分
@WebServlet("/AjaxTest")
public class AjaxTest extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public AjaxTest() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        String name = request.getParameter("username");
        String sex = request.getParameter("sex");
        String age = request.getParameter("age");
        String phone = request.getParameter("phone");
         response.setCharacterEncoding("UTF-8");  
         response.setContentType("application/json");  
        
        
        User one = new User(name,sex,age,phone);
        String result = one.toString();
        System.out.println(result);
        response.getWriter().append(result);
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }


User類

public class User  {
  private String username;
  private String sex;
  private String age;
  private String phone;
  public User(String username, String sex, String age, String phone) {

    this.username = username;
    this.sex = sex;
    this.age = age;
    this.phone = phone;
}
  
public String getUsername() {
    return username;
}
public void setUsername(String username) {
    this.username = username;
}
public String getSex() {
    return sex;
}
public void setSex(String sex) {
    this.sex = sex;
}
public String getAge() {
    return age;
}
public void setAge(String age) {
    this.age = age;
}
public String getPhone() {
    return phone;
}
public void setPhone(String phone) {
    this.phone = phone;
}

@Override
public String toString() {
    return "{" +  "\"username\"" + ':' + "\""+ username +"\"" + ","+ "\"sex\""+':' +"\"" +sex +"\""+','+ "\"age\""+':' + "\"" + age + "\"" +','+"\"phone\""+':' + "\""+phone+"\"" + "}";
}
}

View Code

具體實例代碼2（采用gson轉換json方式處理）

前端代碼（含ajax）

 1 <html>
 2 <head>
 3 
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>Insert title here</title>
 6 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
 7 </head>
 8 <body>
 9 <input type="text" name="cc"  / >
10 <input type="submit" />
11 <div>
12      姓名：<span id="name"></span> <br/>
13      性別：<span id="sex"></span><br/>
14      年齡： <span id="age"></span>      
15 </div>
16 </form>
17   <script type="text/javascript">
18        $(function(){
19            $("input[type=submit]").click(function(){
20                $.post("ajax",
21                    {"cc":$("input[name=cc]").val()},
22                  function(data,textStatus){
23                       console.log(data.name); 
24                       $("#name").html(data.name);
25                       $("#sex").html(data.sex);
26                       $("#age").html(data.age);
27                    },
28                  "json"   
29                );
30             });
31            
32        })
33   </script>
34 </body>
35 </html>

View Code

servlet部分（調用gson方法）

servlet部分
@WebServlet("/ajax")
public class ajax extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public ajax() {
        super();
        // TODO Auto-generated constructor stub
    }
    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        response.setCharacterEncoding("utf-8");
        String c = request.getParameter("cc");
        System.out.println(c);
        User one = new User(c, "男", 13);
        Gson gson = new Gson();
        String result = gson.toJson(one);
        response.getWriter().append(result);
        
    }
    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}

User類部分

public class User {
  private String name;
  private String sex;
  private int age;
public User(String name, String sex, int age) {
    this.name = name;
    this.sex = sex;
    this.age = age;
}
public String getName() {
    return name;
}
public void setName(String name) {
    this.name = name;
}
public String getSex() {
    return sex;
}
public void setSex(String sex) {
    this.sex = sex;
}
public int getAge() {
    return age;
}
public void setAge(int age) {
    this.age = age;
}
  
}

View Code

具體實例代碼3（多組數據傳至ajax）

前端代碼（含ajax）

 1 <html>
 2 <head>
 3 
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>Insert title here</title>
 6 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
 7 </head>
 8 <body>
 9 <input type="text" name="ceshi">
10 <input type="submit" value="獲取名單"/>
11 <table id="table">
12 
13 </table>
14 </form>
15   <script type="text/javascript">
16        $(function(){
17            $("input[type=submit]").click(function(){
18                $.post("ajax",
19                    {"ceshi":$("input[name=ceshi]").val()},
20                  function(data,textStatus){
21                       console.log(data); 
22                       for(var i = 0;i<data.length; i++)
23                         {
24                          $("#table").append( $("<tr></tr>")
25                                  .append($("<td></td>").html(data[i].name))
26                                  .append($("<td></td>").html(data[i].sex))
27                                  .append($("<td></td>").html(data[i].age)));
28                         }
29                    },
30                  "json"   
31                );
32             });
33            
34        })
35   </script>
36 </body>
37 </html>

servlet部分（調用gson方法處理數據）

 1 servlet部分
 2 @WebServlet("/ajax")
 3 public class ajax extends HttpServlet {
 4     private static final long serialVersionUID = 1L;
 5        
 6     /**
 7      * @see HttpServlet#HttpServlet()
 8      */
 9     public ajax() {
10         super();
11         // TODO Auto-generated constructor stub
12     }
13     /**
14      * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
15      */
16     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
17         // TODO Auto-generated method stub
18         response.setCharacterEncoding("utf-8");
19         String string = request.getParameter("ceshi");
20         Gson gson = new Gson();
21         List list = new ArrayList();
22         User one = new User("張三", "男", 13);
23         User two = new User("李四","男", 15);
24         User three = new User("王五","男", 20);
25         list.add(one);
26         list.add(two);
27         list.add(three);
28         
29         String result = gson.toJson(list);    
30         response.getWriter().append(result);
31     }
32     /**
33      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
34      */
35     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
36         // TODO Auto-generated method stub
37         doGet(request, response);
38     }
39 
40 }
41 
42 User類
43 
44 
45 public class User {
46   private String name;
47   private String sex;
48   private int age;
49 public User(String name, String sex, int age) {
50     this.name = name;
51     this.sex = sex;
52     this.age = age;
53 }
54 public String getName() {
55     return name;
56 }
57 public void setName(String name) {
58     this.name = name;
59 }
60 public String getSex() {
61     return sex;
62 }
63 public void setSex(String sex) {
64     this.sex = sex;
65 }
66 public int getAge() {
67     return age;
68 }
69 public void setAge(int age) {
70     this.age = age;
71 }
72   
73 }

View Code

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JQuery + JSON作為前后台數據交換格式實踐數據交換格式XML和JSON對比使用 C++ 處理 JSON 數據交換格式 JSON的基本結構和數據交換原理 Google數據交換格式：ProtoBuf 兩種常用的數據交換格式：XML和JSON python開發_json_一種輕量級的數據交換格式 JSON、使用JSON進行數據交換的基礎和原理數據交換技術【C# 序列化】System.Text.Json.Nodes ---Json數據交換格式對應C#類