1.擴展：ajax
1.1 代碼如下
$.ajax({
url:'地址',
type:'get/post',
data:{},
dataType:'json/jsonp',
success:function(res){
//請求成功，接收返回值
}
})
1.2 概念
- ajax不能跨域請求
- 兩個網址：協議 主域號 端口號 完全相同時，這時兩個網址完全相同，任意其一不同，即為跨域請求
- 解決跨域：
- 1.jsonp:在$.ajax({dataType:'jsonp'}),需要后台支持jsonp形式
- 2.cors:需要后台配合
- 3.后台設置允許所有或指定網址能直接訪問
- 簡寫形式：
- $.get(url,data,function(res){})
- $.post(url,data,function(res){})
2.jQuery里的Promise
2.1 個人理解
- 同步：同時只能做一件事 代碼簡單
- 異步：操作之間沒有關系 同時請求進行多個操作，小程序中可用於請求數據api接口，代碼更復雜,用同步一樣的方式，來書寫異步代碼
- Promise.all([$.ajax(),$.ajax()]).then(result=>{alert('對了')},err=>{alert('錯了')})
2.2 代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高版本jquery中Promise</title>
<script src=" https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>
<script>
// 高版本jquery中Promise自帶封裝函數
Promise.all([
$.ajax({
url: 'arr.txt',
dataType: 'json'
})
]).then(function(arr) {
alert('成功');
let [res1, res2] = arr;
alert(res1);
alert(res2);
}, function() {
alert('失敗');
});
</script>
</head>
<body>
</body>
</html>
3.Promise怎么用
3.1 利用函數賦值來返回請求數據
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Promise怎么用</title>
<script src=" https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>
<script>
let p = new Promise(function(resolve, reject) {
// 異步代碼
// resolve——成功了
// reject——失敗了
$.ajax({
url: 'arr.txt',
data: {},
dataType: 'json',
success: function(arr) {
//請求成功，接收返回值
resolve(arr);
},
error(err) {
reject(err);
}
});
});
// 原先js時
p.then(function() {
alert('成功');
}, function() {
alert('失敗');
});
</script>
</head>
<body>
</body>
</html>
3.2 利用函數參數來進行promise操作返回請求數據
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Promise怎么用</title>
<script src=" https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>
<script>
// 封成函數,進行參數傳遞即可
function createPromise(url) {
return new Promise(function(resolve, reject) {
// 異步代碼
// resolve——成功了
// reject——失敗了
$.ajax({
url: 'arr.txt',
data: {},
dataType: 'json',
success: function(arr) {
//請求成功，接收返回值
resolve(arr);
},
error(err) {
reject(err);
}
});
});
}
// let p1 = new Promise(function(resolve, reject) {
// // 異步代碼
// // resolve——成功了
// // reject——失敗了
// $.ajax({
// url: 'arr.txt',
// data: {},
// dataType: 'json',
// success: function(arr) {
// //請求成功，接收返回值
// resolve(arr);
// },
// error(err) {
// reject(err);
// }
// });
// });
// let p2 = new Promise(function(resolve, reject) {
// // 異步代碼
// // resolve——成功了
// // reject——失敗了
// $.ajax({
// url: 'arr.txt',
// data: {},
// dataType: 'json',
// success: function(arr) {
// //請求成功，接收返回值
// resolve(arr);
// },
// error(err) {
// reject(err);
// }
// });
// });
// 現在js時
Promise.all([
// p1, p2
// 簡化操作
createPromise('arr.txt')
]).then(function(arr) {
alert('成功');
let [res1, res2] = arr;
alert(res1);
alert(res2);
}, function() {
alert('失敗');
});
</script>
</head>
<body>
</body>
</html>
