Ajax 不是一種新的編程語言，而是一種用于創建更好更快以及互動性更強的Web應用程式的技術，
jQuery Ajax本質就是 XMLHttpRequest，對他進行了封裝，方便呼叫！
jQuery.ajax(...)
部分引數：
url：請求地址
type：請求方式，GET、POST（1.9.0之后用method）
headers：請求頭
data：要發送的資料
contentType：即將發送資訊至服務器的內容編碼型別(默認: "application/x-www-form-urlencoded; charset=UTF-8")
async：是否異步
timeout：設定請求超時時間（毫秒）
beforeSend：發送請求前執行的函式(全域)
complete：完成之后執行的回呼函式(全域)
success：成功之后執行的回呼函式(全域)
error：失敗之后執行的回呼函式(全域)
accepts：通過請求頭發送給服務器，告訴服務器當前客戶端可接受的資料型別
dataType：將服務器端回傳的資料轉換成指定型別
"xml": 將服務器端回傳的內容轉換成xml格式
"text": 將服務器端回傳的內容轉換成普通文本格式
"html": 將服務器端回傳的內容轉換成普通文本格式，在插入DOM中時，如果包含JavaScript標簽，則會嘗試去執行，
"script": 嘗試將回傳值當作JavaScript去執行，然后再將服務器端回傳的內容轉換成普通文本格式
"json": 將服務器端回傳的內容轉換成相應的JavaScript物件
"jsonp": JSONP 格式使用 JSONP 形式呼叫函式時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函式名，以執行回呼函式
ajax的使用如下
@Controller
@RequestMapping("Ajax2")
public class AjaxController2 {
//ResponseBody 以json格式跳轉
@RequestMapping("/som")
@ResponseBody
public List<User> a2(){
List<User> list=new ArrayList<>();
//創建物件
User u1 = new User("喜洋洋",15,"男");
User u2 =new User("小果叮",12,"男");
User u3 =new User("美羊羊",14,"女");
User u4 =new User("不高興",12,"男");
list.add(u1);
list.add(u2);
list.add(u3);
list.add(u4);
return list;
}
}
jsp頁面如下
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>AJAX</title>
</head>
<body>
<input type="button" id="btn" value="獲取資料"/>
<table width="80%" align="center">
<tr>
<td>姓名</td>
<td>年齡</td>
<td>性別</td>
</tr>
<tbody id="content" >
</tbody>
</table>
<!-- 匯入jQuery -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$.post({
url:"${pageContext.request.contextPath }/Ajax2/som.do",
success:function(data){
console.log(data);
var html="";
//回圈資料
for(var i=0;i<data.length;i++){
html+="<tr>"+
"<td>"+data[i].name+"</td>"
+"<td>"+data[i].age+"</td>"
+"<td>"+data[i].sex+"</td>"
+"</tr>"
}
$("#content").html(html);
}
});
})
})
</script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/289443.html
標籤：其他