相關說明
格式說明：
1.引數名；
2.引數型別；
3.引數說明，默認值，可選值；
url
String
(默認: 當前頁地址) 發送請求的地址，
type
String
(默認: "GET") 請求方式 ("POST" 或 "GET")， 默認為 "GET"，
注意：其它 HTTP 請求方法，如 PUT 和 DELETE 也可以使用，但區域分瀏覽器支持，
timeout
Number
設定請求超時時間（毫秒），此設定將覆寫全域設定，
async
Boolean
(默認: true) 默認設定下，所有請求均為異步請求，如果需要發送同步請求，請將此選項設定為 false，注意，同步請求將鎖住瀏覽器，用戶其它操作必須等待請求完成才可以執行，
beforeSend
Function
發送請求前可修改 XMLHttpRequest 物件的函式，如添加自定義 HTTP 頭，XMLHttpRequest 物件是唯一的引數，
function (XMLHttpRequest) {
this;
}
cache
Boolean
(默認: true) jQuery 1.2 新功能，設定為 false 將不會從瀏覽器快取中加載請求資訊，
complete
Function
請求完成后回呼函式 (請求成功或失敗時均呼叫)，引數： XMLHttpRequest 物件，成功資訊字串，
function (XMLHttpRequest, textStatus) {
}
contentType
String
(默認: "application/x-www-form-urlencoded") 發送資訊至服務器時內容編碼型別，默認值適合大多數應用場合，
data
Object,String
發送到服務器的資料，將自動轉換為請求字串格式，GET 請求中將附加在 URL 后，
查看 processData 選項說明以禁止此自動轉換，必須為 Key/Value 格式，
如果為陣列，jQuery 將自動為不同值對應同一個名稱，
如 {foo:["bar1", "bar2"]} 轉換為 '&foo=bar1&foo=bar2'，
dataType
String
預期服務器回傳的資料型別，如果不指定，jQuery 將自動根據 HTTP 包 MIME 資訊回傳 responseXML 或 responseText，并作為回呼函式引數傳遞，可用值:
"xml": 回傳 XML 檔案，可用 jQuery 處理，
"html": 回傳純文本 HTML 資訊；包含 script 元素，
"script": 回傳純文本 JavaScript 代碼，不會自動快取結果，
"json": 回傳 JSON 資料 ，
"jsonp": JSONP 格式，使用 JSONP 形式呼叫函式時，
如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函式名，以執行回呼函式，
error
Function
(默認: 自動判斷 (xml 或 html)) 請求失敗時將呼叫此方法，
這個方法有三個引數：XMLHttpRequest 物件，錯誤資訊，（可能）捕獲的錯誤物件，
function (XMLHttpRequest, textStatus, errorThrown) {
// 通常情況下textStatus和errorThown只有其中一個有值 this;
}
global
Boolean
(默認: true) 是否觸發全域 AJAX 事件，
設定為 false 將不會觸發全域 AJAX 事件，如 ajaxStart 或 ajaxStop ，
可用于控制不同的Ajax事件
ifModified
Boolean
(默認: false) 僅在服務器資料改變時獲取新資料，使用 HTTP 包 Last-Modified 頭資訊判斷，
processData
Boolean
(默認: true) 默認情況下，發送的資料將被轉換為物件(技術上講并非字串) 以配合默認內容型別 "application/x-www-form-urlencoded"，
如果要發送 DOM 樹資訊或其它不希望轉換的資訊，請設定為 false，
success
Function
請求成功后回呼函式，這個方法有兩個引數：服務器回傳資料，回傳狀態function (data, textStatus) {
// data could be xmlDoc, jsonObj, html, text, etc...
}
1.發送get請求將引數通過？拼接在url后面
$.ajax({
url: "/login/authenticate?name="+name+"&user="+user, //請求的url地址
url: Feng.ctxPath + "/reportDay/checkMerNo?merNo=" + merNo, //請求的地址
cache: "false", //設定為false將不會從瀏覽器中加載請求資訊
async: "true", //true所有請求均為異步請求
dataType: "json", //請求回傳資料的格式
type:"get", //請求方式
success: function(data){ //請求成功后的回呼方法
console.log("data:" + data);
if(data =https://blog.csdn.net/LuckFairyLuckBaby/article/details/= true){
}else{
Feng.error("不存在該商戶號，請仔細檢查后在填寫!")
}
},
error:function () { //請求失敗后的回呼方法
Feng.error("請求出錯!")
}
});
后臺接收引數
/**
通過@RequestParam("***")接收引數值
*/
@RequestMapping("/yourUrl")
@ResponseBody
public String yourUrl(@RequestParam("merNo") String merNo) {
System.out.println(yourData);
// 回傳值可以自由定義
return "SUCCESS";
}
2.將引數拼接在url中，后臺通過占位符接收引數 /{id}
$.ajax({
url: Feng.ctxPath + "/reportDay/checkMerNo/" + merNo, //請求的地址
cache: "false", //設定為false將不會從瀏覽器中加載請求資訊
async: "true", //true所有請求均為異步請求
dataType: "json", //請求回傳資料的格式
type:"get", //請求方式
success: function(data){ //請求成功后的回呼方法
console.log("data:" + data);
if(data =https://blog.csdn.net/LuckFairyLuckBaby/article/details/= true){
}else{
Feng.error("不存在該商戶號，請仔細檢查后在填寫!")
}
},
error:function () { //請求失敗后的回呼方法
Feng.error("請求出錯!")
}
});
后臺接收引數
/**
@PathVariable("yourDataName")接收
*/
@RequestMapping("/yourUrl/{merNo}")
@ResponseBody
public String yourUrl(@PathVariable("merNo") String merNo) {
System.out.println(yourData);
// 回傳值可以自由定義
return "SUCCESS";
}
3.通過post提交方式將form表單中的資料序列化后傳遞到后臺，
$.ajax({
url: Feng.ctxPath + "/reportDay/checkMerNo", //請求的地址
data: $("#myForm").serialize(), // 對id為myForm的表單資料進行序列化并傳遞到后臺
cache: "false", //設定為false將不會從瀏覽器中加載請求資訊
async: "true", //true所有請求均為異步請求
dataType: "json", //請求回傳資料的格式
type:"post", //請求方式
success: function(data){ //請求成功后的回呼方法
console.log("data:" + data);
if(data =https://blog.csdn.net/LuckFairyLuckBaby/article/details/= true){
}else{
Feng.error("不存在該商戶號，請仔細檢查后在填寫!")
}
},
error:function () { //請求失敗后的回呼方法
Feng.error("請求出錯!")
}
});
后臺接收引數
/**
在這里我假設大家表單資料與User物體類相對應
*/
@RequestMapping("/yourUrl")
@ResponseBody
public String yourUrl(User user) {
System.out.println(user.toString());
return "SUCCESS";
}
4.常見的data傳值
$.ajax({
url: Feng.ctxPath + "/reportDay/checkMerNo", //請求的地址
data: { // 提交資料
"username": "admin", // 前者為欄位名，后者為資料
"password": "admin"
},
cache: "false", //設定為false將不會從瀏覽器中加載請求資訊
async: "true", //true所有請求均為異步請求
dataType: "json", //請求回傳資料的格式
type:"post", //請求方式
success: function(data){ //請求成功后的回呼方法
console.log("data:" + data);
if(data =https://blog.csdn.net/LuckFairyLuckBaby/article/details/= true){
}else{
Feng.error("不存在該商戶號，請仔細檢查后在填寫!")
}
},
error:function () { //請求失敗后的回呼方法
Feng.error("請求出錯!")
}
});
接收引數
/**
在這里我假設大家表單資料與User物體類相對應
*/
@RequestMapping("/yourUrl")
@ResponseBody
public String yourUrl(@RequestParam("username") String username,
@RequestParam("password") String password) {
System.out.println("username="+username+";password="+password);
return "SUCCESS";
}
5.拼接data
$.ajax({
url: Feng.ctxPath + "/reportDay/checkMerNo", //請求的地址
data: 'name='+name+'&user='+user, //引數值
cache: "false", //設定為false將不會從瀏覽器中加載請求資訊
async: "true", //true所有請求均為異步請求
dataType: "json", //請求回傳資料的格式
type:"get", //請求方式
success: function(data){ //請求成功后的回呼方法
console.log("data:" + data);
if(data =https://blog.csdn.net/LuckFairyLuckBaby/article/details/= true){
}else{
Feng.error("不存在該商戶號，請仔細檢查后在填寫!")
}
},
error:function () { //請求失敗后的回呼方法
Feng.error("請求出錯!")
}
});
后臺接收引數
/**
@RequestParam
*/
@RequestMapping("/yourUrl")
@ResponseBody
public String yourUrl(@RequestParam("name") String name, @RequestParam("user") String user) {
System.out.println("username="+username+";password="+password);
return "SUCCESS";
}
6.@ModelAttribute注解：使用@ModelAttribute這個方法可以直接將引數映射成pojo物件，我不加@ModelAttribute注解，直接接收pojo物件，同樣能夠接收到引數
<script type="text/javascript">
$(function(){
$.ajax({
type:"post",
url:"http://localhost:8080/test",
data:{
"name":"張三",
"phone":"10086",
"password":"123456"
},
async:true,
success:function(data){
console.log(data);
}
});
})
</script>
后臺接收引數
@RequestMapping("/test")
@ResponseBody
public String testUser(@ModelAttribute("TUser") TUser user){
System.out.println(user.getName());
System.out.println(user.getPassword());
System.out.println(user.getPhone());
return "ok";
}
7.@PathVariabl
<script type="text/javascript">
$(function(){
$.ajax({
type:"post",
url:"http://localhost:8080/test/10086",
data:{
"name":"張三",
"password":"123456"
},
async:true,
success:function(data){
console.log(data);
}
});
})
</script>
后臺接收引數
@RequestMapping("/test/{phone}")
@ResponseBody
public String testUser(String name,@PathVariable String phone,String password){
System.out.println(name);
System.out.println(phone);
System.out.println(password);
return "ok";
}
使用HttpServletRequest接收引數
@RequestMapping("/test")
@ResponseBody
public String testUser(HttpServletRequest request, HttpServletResponse response){
System.out.println(request.getParameter("name"));
System.out.println(request.getParameter("phone"));
System.out.println(request.getParameter("password"));
return "ok";
}
使用@RequestParam接收引數
@RequestMapping("/test")
@ResponseBody
public String testUser(@RequestParam("name") String a,@RequestParam("phone") String b, String password){
/**
* @RequestParam() 里邊的值必須要和前端傳遞過來的引數名字相同
*/
System.out.println(a);
System.out.println(b);
System.out.println(password);
return "ok";
}
非異步方式傳值
非異步方式前臺傳遞引數
1.與異步方式類似，使用form直接提交或者在鏈接中拼接引數即可，
<!-- form表單提交 -->
<form id="myForm" action="/yourUrl" method="post">
<input type="text" name="username" required placeholder="郵箱"/>
<input type="password" name="username" required placeholder="密碼"/>
<button type="submit" >登錄</button>
</form>
<!-- a標簽拼接引數 -->
<a href="https://blog.csdn.net/yourUrl?youDataName=yourData">問號傳遞引數</a>
<a href="https://blog.csdn.net/yourUrl/yourData">拼接鏈接傳遞引數</a>
2.后臺接受引數方式不變，與異步方式完全相同，
非異步方式后臺向前臺傳遞資料
// 1.可以通過session進行引數傳遞
@RequestMapping("/yourUrl")
public String yourUrl(HttpServletRequest request) {
// 通過request獲取session，然后向session中放入引數key-value
request.getSession().setAttribute("yourDataName", "yourData");
// 跳轉到你的視圖
return "/yourViews";
}
// 2.可以通過Model進行引數傳遞
@RequestMapping("/yourUrl")
public String yourUrl(Model model) {
// 向model中加入引數key-value
model.addAttribute("yourDataName", "yourData");
// 跳轉到你的視圖
return "/yourViews";
}
// 3.同樣可以用request進行引數傳遞
@RequestMapping("/yourUrl")
public String yourUrl(HttpServletRequest request) {
// 通過request放入引數key-value
request.setAttribute("yourDataName", "yourData");
// 跳轉到你的視圖
return "/yourViews";
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/1548.html
標籤：其他