jquery實現Ajax請求的三種方式
阿新 • • 發佈：2019-01-01
jquery 對 ajax的請求進行了封裝，可以使程式碼更簡潔,也自動替我們解決了，瀏覽器問題。
jquery 提供了三種 ajax 請求的函式，分別為： $.ajax() , $.get() , $.post() ，下面是一個 jquery 實現ajax 請求的例項：
效果 ： 頁面載入完成時，自動發起ajax請求，從後臺獲取資料，並顯示在頁面表格中：
頁面程式碼：
<body> <table align="center" cellpadding="20" width="300" cellspacing="0" border="1" bordercolor="#a0c6e5"> <tbody id="tbBody"></tbody> </table> </body>
Ajax請求
後臺 servlet 程式碼<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-2.1.1.js"></script> <script type="text/javascript"> $(function(){ $.ajax({ url : "AjaxJson", //請求url type : "POST", //請求型別 post|get // data : "key=value&key1=value2", //後臺用 request.getParameter("key"); dataType : "json", //返回資料的 型別 text|json|html-- success : function(users){ //回撥函式 和 後臺返回的 資料 // var users = JSON.parse(data); var tBody = $("#tbBody"); for(var i=0; i<users.length; i++){ //通過遍歷，建立行資料 var tr = $("<tr><td>"+users[i].id+"</td><td>"+users[i].name+"</td><td>"+users[i].school+"</td></tr>") tBody.append(tr); } } }); }); // get 方式 傳送請求 // $.get(url,data,callback,type); data為 傳送的資料 {key:value}形式 ， // callback成功時的回撥函式 function(result){} result 後臺返回的資料 ， //type 返回的資料型別 預設為 text ,可以設為 json text //post 方式 傳送請求 // $.post(url,data,callback,type); </script>
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setHeader("Content-Type", "text/html;charSet=utf-8");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
User user1 = new User(1,"liuyj1","henu1");
User user2 = new User(2,"liuyj2","henu2");
User user3 = new User(3,"liuyj3","henu3");
List<User> users = new ArrayList<User>();
users.add(user1);
users.add(user2);
users.add(user3);
/* 使用 Gson 外掛，將 java物件 轉為 json 格式的字串 匯入 Gson 的jar包即可 效果：當訪問這個頁面時，自動獲取後臺資料，載入在頁面表格中
