一、Ajax
$.ajax({
url:"服務器端介面地址",
type:"get或post", //請求型別
data:{ //如果沒有引數，可省略
引數名: 引數值,
... : ...
},
dataType:"json",
//自動呼叫JSON.parse()將服務器端回傳的json字串轉化為記憶體中直接可用的陣列或物件
//若服務器端回傳的不是json字串，則可以省略
success:function(result){
//回呼函式，請求回應成功后自動觸發，形參result自動接住已經編譯后的回應結果物件
//因為ajax是異步的，所以希望在請求成功后才能執行的代碼必須寫在success內部
}
})
舉例：使用ajax請求云服務器介面中的資料；
<script>
//查詢5號商品的詳細資訊
$.ajax({
url: "http://xzserver.applinzi.com/details",
type: "get",
data: {
lid: 5
},
dataType: "json",
success: function (result) {
console.log(result)
}
})
//登錄驗證
$.ajax({
url: "http://xzserver.applinzi.com/users/signin",
type: "post",
data: {
uname: "dingding",
upwd: "123456"
},
dataType: "json",
success: function (result) {
console.log(result);
}
})
</script>二、跨域
一個域名下網站中的網頁，去請求另一個域名下網站中的資源，就是跨域，
1.可以跨域的元素或程式
<link rel="stylesheet" href="別的網站的css檔案">
<script src="別的網站的js檔案">
<img src="別的網站的圖片">
<a href="別的網站的頁面">
<iframe src="別的網站的片段">
$.ajax({ url:"別的網站的介面地址" })
2.跨域包括
（1）域名不同：www.a.com下的網頁-->www.b.com
（2）子級域名不同：oa.baidu.cn下的網頁-->hr.baidu.cn
（3）埠不同：http://localhost:5500下的網頁-->http://localhost:3000
（4）協議不同：http://12306.cn下的網頁-->https://12306.cn
（5）即使同一臺主機，自己的域名與自己的IP地址之間也算跨域：http://localhost:3000下的網頁-->http://127.0.0.1:3000
3.使用ajax發送跨域請求
使用ajax發送跨域請求時會報錯，如下圖：
<script>
//向服務器端發送ajax請求，獲取天氣預報
$.ajax({
url: "http://127.0.0.1:3000",
success: function (result) {
console.log(result);
}
})
</script>
這是因為瀏覽器中都有一個CORS策略/同源策略（Cross Origin Resources Sharing）：瀏覽器默認只允許當前網頁中的Ajax請求使用自己網站的資源，不允許ajax請求使用其他域名回傳的資料，
具體方法是：瀏覽器自動檢查每個回應回來的結果資料的來源地址，用資料的來源地址與當前網頁所在的地址比較，如果發現來源地址與網頁所在的地址不一致，則禁止網頁使用其他來源的資料，
4.解決跨域問題（有三種方式，這里僅說一種）
CORS方式，請服務器端篡改資料的來源地址，強行與客戶端地址保持一致，騙過瀏覽器的cors策略，使得cors策略允許資料進入程式使用，格式如下：
//node.js中
res.writeHead(200,{ //先寫請求頭部
... : ...,
"Access-Control-Allow-Origin":"客戶端網頁所在地址"
});
res.write(JSON.stringify(回應結果)) //再寫回應結果
res.end(); //發送
在以上例子中，只需在服務器端添加一句話即可，
再次使用ajax發送跨域請求，結果如下：
5.前后端分離
在開發中前端一個專案，后端一個專案，前后端專案獨立運行，這樣可以避免互相影響，
在后端中可以通過中間件來解決重復寫介面的問題：
a.安裝npm i -save cors
b.在nodejs express專案的app.js中:
var cors=require("cors"); //引入cors中間件
var app=express();
app.use(cors({
origin:[ "http://127.0.0.1:5500", "其它允許跨域的客戶端地址",... ]
}))JavaScript jQuery 終，
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/307352.html
標籤：其他
上一篇：<p>這是一個舊的應用程式，并且使用了硬編碼的值，但是，根本沒有顯示表格-雖然我意識到這意味著我需要為每個設備硬編碼每個值，但目前我甚至無法看到表視圖來開始這樣做。 <preclas