json格式的 jquery ajax 執行個體

最後更新：2018-12-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

jquery使ajax的開發大大的簡化，做ajax的應用，前台和背景資料轉送時必然的。通常，我們可以使用普通的字串作為前後台傳輸的資料（例如使用特殊字元將各個元素分隔開，在後台用split處理等等）。當傳輸的資料量比較大，或者資料的格式比較複雜時，我們可以考慮使用json或者xml的格式來對資料封裝，傳輸。

jquery的ajax函數做的非常的棒，我們可以調用已經封裝好的$.get(),$.post(),$.ajax()，前兩個函數是最後一個函數的特殊，也就是說$.ajax（）可以讓我們的ajax之旅的操控性更強。

下面是一個利用json傳輸的簡單例子：

import org.json.*;     public class MyBean {         private String name;       private int num;       private int array[];         public String getName() {           return name;       }         public void setName(String name) {           this.name = name;       }         public int getNum() {           return num;       }         public void setNum(int num) {           this.num = num;       }         public int[] getArray() {           return array;       }         public void setArray(int[] array) {           this.array = array;       }         public JSONObject toJson() {           JSONObject obj;           try {                obj= new JSONObject();               obj.put("name", this.name);               obj.put("num", this.num);               JSONArray array = new JSONArray(this.array);               obj.put("array", array);             } catch (Exception e) {               e.printStackTrace();               return null;           }           return obj;         }     }

只是一個簡易的pojo類，用來類比，其中有自己的toJson（）方法。需要用到org.json的包

import java.io.IOException;   import java.io.*;   import javax.servlet.ServletException;   import javax.servlet.http.HttpServlet;   import javax.servlet.http.HttpServletRequest;   import javax.servlet.http.HttpServletResponse;     public class JsonServlet extends HttpServlet {         @Override      protected void doGet(HttpServletRequest request,               HttpServletResponse response) throws ServletException, IOException {           // TODO Auto-generated method stub           this.doGet(request, response);       }         @Override      protected void doPost(HttpServletRequest request,               HttpServletResponse response) throws ServletException, IOException {           // TODO Auto-generated method stub           MyBean b = new MyBean();           b.setNum(22);           b.setName("andrew");           int [] array={1,2,3,4};           b.setArray(array);           String str=(String)request.getParameter("text");           System.out.println(str);           PrintWriter out=response.getWriter();           String data=b.toJson().toString();           out.print(data);           System.out.println(data);           out.flush();         }     }

接受ajax請求的servlet

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"      pageEncoding="ISO-8859-1"%>   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml">       <head>           <meta http-equiv="Content-Type"              content="text/html; charset=ISO-8859-1" />           <title>Insert title here</title>           <script               src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>           <script type="text/javascript">           $(document).ready(function(){           $("#b").click(function(){           var t=$("#text1").val()           $.post("json",{text:t},function(data){           var name=data.name;           var num=data.num;           var array=data.array;           $("#content1").html(name);                      },"json");})           })                      </script>           </head>       <body>             <div id="content1"></div>           <input type="text" id="text1" value="default" />           <input type="button" value="click me~" id="b" />       </body>   </html>

利用$.post()方法，傳輸json格式的資料，方法的最後一個參數設定接受資料預設為json

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More