前后端數據交互的幾種不同方式
1、jQuery中的ajax:
實例參考：https://jquery.com/
async：Boolean類型 (true / false)
默認是true，所有請求都為異步請求 false，則所有請求為同步請求
$.ajax({
type:"Post" //提交方式
url:"/api/getWeather" //提交路徑
dataType:"json",
data:{
zipcode:97201 //提交數據
}，
headers:{a:"ajdbhabjh bv"} //請求頭
success:function(result){
$("#Weather-temp").html("<strong>" + result + "</strong>")
},
error:function(xhr,status,error){ //有錯誤處增加error字段
console.log(error)
}
})
ajax 的過程是怎樣的
1. 創建XMLHttpRequest對象,也就是創建一個異步調用對象
2. 創建一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息
3. 設置響應HTTP請求狀態變化的函數
4. 發送HTTP請求
5. 獲取異步調用返回的數據
6. 使用JavaScript和DOM實現局部刷新
2、jquery ajax 獲取數據 轉換成 Json:
$(function(){
var val="";
$.post("book_findBooksJson.action",function(data){
$.each(data,function(index,content){
for(var i=0;i<content.length;i++){
val="<tr><td>"+content[i].id+"</td><td>"+content[i].name+"</td><td>"+content[i].user.username+"</td></tr>";
$("#table tbody").append(val);
}
});
},"json");
});
3、fetch方法
fetch的post表單數據用法：
fetch("http://localhost:99", {
method:"Post",
data:{a:11},
headers:{"content-type": "appliceation/json"
}
body:JSON.stringify({
a:1
})
})
.then(res=>res.json())
.then(d=>console.log(d))
.catch(e=>{})
4、axios方法
// axios默認是json類型的提交
axios({
url:'http://localhost:99',
method:"POST",
data:{
a:12
},
}).then(res=>{console.log(res.data)})
// 如果想改成from則需要修改header和data格式
axios({
url:'http://localhost:99',
method:"POST",
data:{a:12},
headers:{a:dafdsafds}
}).then(res=>{
console.log(res.data)
})
以上僅限於個人總結，僅作交流學習。