ajax使用json數組------前端往后台發送json數組及后台往前端發送json數組

 

1.引子

        Json是跨語言數據交流的中間語言，它以鍵/值對的方式表示數據，這種簡單明了的數據類型能被大部分編程語言理解。它也因此是前后端數據交流的主要方式和基礎。

2.前端往后台傳輸json數據

        第一步，先應該定義一個JSON對象或JSON數組。json對象是“var jsonObj={“name1”:“value1” , “name2”:“value2” , “name3”:“value3”,…};”的格式定義,而json數組則是以中括號"[ ]"包裹多個json對象的格式定義，如 " var jsonArray= [ {‘name1’:‘value1’, ‘name2’:‘value2’ , …} ,{ ‘_name1’ : ‘_value1’ , ‘_name2’ : ‘_value2’, … } , … ] " 。

<script type="text/javascript">
    <!--定義JSON數組-->
    var jsonArr = [ {
        "empNo" : "1242",
        "deptName" : "銷售部",
        "password" : "24284",
        "hobbys" : "跳舞 上網",
        "empName" : "小五",
        "sex" : "男",
        "infor" : "好學生"
    }, {
        "empNo" : "1254",
        "deptName" : "技術部",
        "password" : "24224",
        "hobbys" : "跳舞  唱歌",
        "empName" : "小明",
        "sex" : "女",
        "infor" : "一個漂亮的女孩"
    } ];


</script>

 

        第二步定義ajax方法。ajax方法中的data參數要注意寫法，不能直接以鍵值對的方法設置，要用大括號{}包裹起來的鍵/值對方式定義，並且用JSON.stringify()方法將json對象轉為字符串形式。如果不使用"JSON.stringify()"方法，后台的java代碼將不能獲得json對象。

<a href="javascript:sendJson()">發送Json數據</a>

<script type="text/javascript">
    <!--發送json數據到servlet處理 -->
    function sendJson() {
        $.ajax({
            type : "POST",
            url : "http://localhost:8080/jspdemo/servlet/EmployeeServlet?action=getJsonObj",
            data : {
                'jsonObj' : JSON.stringify(jsonArr) //將原始json對象轉為String
            },
            success : function(msg, status) {
                alert("請求提交后得到了成功的響應");
            }
        });
    }
    </script>

 

        servlet類中定義的方法，用阿里巴巴的fastjson工具包中JSONArray.parseArray(String text, Class clazz)方法，將鍵值對方式排列的字符串形式的json數組解析為java數組對象。

   public void getJsonObj(HttpServletRequest request, HttpServletResponse response)
    {
        String empStr = request.getParameter("jsonObj");
        System.out.println("empjson字符串" + empStr);
       List< Employee> emps = JSONArray.parseArray(empStr,Employee.class);
       System.out.println("json傳到后台的Employee數據:" );
       for(Employee emp: emps){
          System.out.println(emp);
           
       }
    }

 

　　

                控制台輸出

 

3.后台往前端傳輸json數據

        第一步，先在servlet中定義方法，用阿里巴巴的fastjson工具包中JSONArray.toJSON(Object javaObject).toString() 將java對象轉化為json數據形式的字符串。將此字符串用PrintWriter的print()方法發送到前端

  public void getEmpList(HttpServletRequest request, HttpServletResponse response)
    {
        List<Employee> empList = generateEmployeeList();
        for(Employee emp: empList){
            System.out.println(emp);
         }
        try
        {
            //轉為json數據形式的字符串
response.getWriter().print(JSONArray.toJSON(empList).toString());
        }
        catch (IOException e)
        {
            e.printStackTrace();
        }
    }

 

        第二步，用ajax方法請求后台的servlet的相應方法。在設置ajax的可選參數"dataType"應當設置為"json",這樣顯式地聲明返回數據類型是json格式，可以直接用其下標取出其中的元素。如果省略此參數，“dataType"默認是"text”，則需要先用函數 eval("("+data+")")將其轉化為json格式，然后再循環遍歷json數組其中的元素 。

<script type="text/javascript">
<!-- ajax顯示全部 方法-->
    function ajaxQueryAll() {
        $.ajax({
            type : "POST",
            url : "http://localhost:8080/jspdemo/servlet/EmployeeServlet?action=getEmpList",
            /* dataType參數若沒寫，需要先用函數"var $result=eval('('+data+')');"轉化為json格式 ,
            再遍歷 $result中的元素 */
            dataType : "json",
            success : function(data) {
                var $tbody = $("#table-main");
                var $data = $(data);
                /* 以下標遍歷 */
                    /* for (var i = 0; i < data.length; i++) {
                        $tbody.append("<tr >");
                        $tbody.append("<td>" + data[i].empNo + "</td>");
                        $tbody.append("<td>" + data[i].empName + "</td>");
                        $tbody.append("<td>" + data[i].sex + "</td>");
                        $tbody.append("<td>" + data[i].deptName + "</td>");
                        $tbody.append("<td>" + data[i].hobbys + "</td>");
                        $tbody.append("<td>" + data[i].infor + "</td>");
                        $tbody.append("</tr >");
                    }
                     */
        /*forEach循環遍歷  */
                $data.each(
                    function() {
                        $tbody.append("<tr >");
                        $tbody.append("<td>" + this.empNo + "</td>");
                        $tbody.append("<td>" + this.empName + "</td>");
                        $tbody.append("<td>" + this.sex + "</td>");
                        $tbody.append("<td>" + this.deptName + "</td>");
                        $tbody.append("<td>" + this.hobbys + "</td>");
                        $tbody.append("<td>" + this.infor + "</td>");
                        $tbody.append("</tr >");
                    }
                );
            }
        });
    }
    </script>
    
    <input type="button" onClick="ajaxQueryAll()" value="ajax查詢所有" />
    <table width="400px" align="center" border="1px"
        style="background-color:orange;">
        <thead>
            <tr>
                <th>員工編號</th>
                <th>姓名</th>
                <th>性別</th>
                <th>部門</th>
                <th>愛好</th>
                <th>附加信息</th>
            </tr>
        </thead>
        <tbody id="table-main">
        </tbody>
    </table>

 

                控制台輸出

 

                前端頁面顯示