1.jQuery中的ajax
$.ajax({
url:'地址',
type:'get/post',
data:{},
dataType:'json/jsonp',
success:function(res){
//请求成功，接收返回值
}
})
2.代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用ajax</title>
</head>
<body>
<script src=" https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
<script>
$.ajax({
url: 'https://a.huodong.mi.com/flashsale/getslideshow',
type: 'get',
// 解决跨域
dataType: 'jsonp',
success: function(res) {
console.log(res)
}
})
// $.get('http://www.wwtliu.com/sxtstu/blueberrypai/getIndexBanner.php', function(res) {
// console.log(res)
// })
</script>
</body>
</html>
ajax跨域
- ajax不能跨域请求
- 两个网址：协议 主域号 端口号 完全相同时，这时两个网址完全相同(任意其一不同，即为跨域请求)
- 解决跨域：
- 1.jsonp:在$.ajax({dataType:'jsonp'}),需要后台支持jsonp形式
- 2.cors:需要后台配合
- 3.后台设置允许所有或指定网址能直接访问
- 简写形式：
- $.get(url,data,function(res){})
- $.post(url,data,function(res){})
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实际操作ajax</title>
</head>
<body>
<ul id="list">
</ul>
<button id="btn">下一页</button>
<script src=" https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
<script>
var nowpage = 0;
function createPage(nowpage) {
$.ajax({
url: 'https://sclub.jd.com/comment/productPageComments.action?productId=5089275&score=0&sortType=5&pageSize=10&isShadowSku=0&rid=0&fold=1',
type: 'get',
data: {
// 将页数拿出来
page: nowpage
},
// 解决跨域
dataType: 'jsonp',
success: function(res) {
console.log(res)
$("#list").empty()
for (var i = 0; i < res.comments.length; i++) {
if (res.comments[i]['userImage'].indexOf('http') == -1) {
res.comments[i]['userImage'] = "https://" + res.comments[i]['userImage']
}
$("<li><img src=" + res.comments[i]['userImage'] +
"alt=''/></li><span>" + res.comments[i]['nickname'] +
"</span><p>" + res.comments[i]['content'] + "</p>").appendTo("#list")
}
}
})
}
createPage(nowpage)
// 点击下一页，切换页面内容
$('#btn').click(function() {
nowpage++
createPage(nowpage)
})
// https://sclub.jd.com/comment/productPageComments.action?
// productId=5089275&score=0&sortType=5&page=2&pageSize=10&isShadowSku=0&rid=0&fold=1
</script>
</body>
</html>