知识点一:AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新。简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。
知识点二:创建数据请求三种方法
$.ajax()方法
$.ajax({
// 请求的地址
url:'https://showme.myhope365.com/api/shop/shopGoods/open/hot/list1',
// 请求方式
type:'post',
// 请求参数:get方法可以不写这一项,拼接在网址后头,,,post必须写data数据,传参
data:{
},
//成功回调之前的返回函数。。。成功与否都会显示
beforeSend: function(){},
// 成功回调
success:function(res){
console.log(res)
},
//成功回调函数之后返回的如果没成功也会返回此函数
complete: function(){}
error:function(error){
console.log(404)
}
})
$.get() 和$.post()方法
//get方法
$.get("网址/地址",{data(可有可无)},function(data,status){
回调函数
});
案例
$.get('url', function (res) {
console.log(res);
}
)
post()方法
post方法
$.post("网址/地址", {data}, function(data,status){
回调函数
});
案例
// $.post()方法 与get区别就是多了data参数
$.post('url', { 参数: 参数值, 参数1: 参数值1 },
function (res) {
console.log(res);
})
知识点三:load方法
jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
// load() 方法从服务器加载数据,并把返回的数据放入被选元素中 div是被选元素
// $(selector).load(URL,data,callback);
// live server 插件安装 、、、换个域
// 协议、域名、端口号只要其中一个不同,就会出现跨域现象
// 三个参数 第一个是请求回来的内容
// 第二个是状态
// 第三个是实例化对象
$("#box").load("maqiaoqiao.txt", function (responseTxt, statusTxt, xhr) {
console.log(responseTxt);
console.log(statusTxt);
console.log(xhr);
})
知识点四:JSON跨域
判断:如果协议、域名、端口号有一样不匹配,就是跨域
如果出现跨域现象就会报这种错,,普通的解决办法在VScode上安装live server,,并在运行时点击右下角的Go Live
json对象里遍历数组 forEach for in
案例
// 对象里的数组for循环遍历获取数组元素
for (var i = 0; i < num.attribute.length; i++) {
document.write(num.attribute[i]);
}
// forEach循环
// 第一个形参是数组里的元素
// 第二个形参是数组元素的索引值
num.attribute.forEach(function (value, index) {
document.write(index);
document.write(value);
})
// for in
// key表示索引
for (var key in num.attribute) {
console.log(key)
document.write(num.attribute[key])
}
知识点五:跨域的解决方法
总结:解决跨域方法:1.jsonp 2.后台配置 3.设置代理