关于Jquery封装的ajax数据请求方式
具体写法:
$.ajax({
//请求的地址
url : '',
//请求类型,get,post
type:'GET',
// 请求的数据类型,可以是html,json,xml等
dataType:'json',
//传输的数据
data:{
uname:username,
upassword: upassword
},
//选择是否支持异步刷新,默认为true
async:true,
success:function(res){
console.log('请求成功',res);
},
error:function(e){
console.log('请求失败',e);
}
})
相对于原生的ajax,通过jquery封装的方法少了原生的写法的四大步骤,直接封装$.ajax({}),实现数据请求,通过url拿到服务端的地址,通过接口找到后端数据的地址,如果有跨域,可以通过jsonp去实现,通过url找到数据的地址,再通过data找到数据的对象,然后找到相应的的数据,找到数据后,通过请求的数据,通过数据的返回值,如果成功就通过success,去实现数据的拿出再实现数据的渲染,失败就通过error返回失败的信息。
这几天与小伙伴写一个晓得前台注册登录小网页,需要通过ajax请求服务通过接口获取数据,然后实现页面数据的增删改查。基本上是从服务端获取数据请求,拿到数据后再开展系列操作,再将处理后的数据发送过去。由于我们用的是实验性练手小服务器能够容量的数据量不是很大,有的小伙伴在获取数据处理时没有写到位也不管处理后的数据是否处理得当直接发送ajax请求导致服务器出现错误。其实呢,避免这个错误很简单,在处理数据完后先别急着发送请求,先打印处理后的数据是否正确,检测正确后再发送请求,这样就ok了!
在这里还要记录自己编写代码时的一个错误
当携带参数跳转到另一页面时的字符串拼接时千万不要在参数字段前加空格,这样会对参数进行decodeURI解码出现错误(因为在平时书写规范时容易给=前后加空格)
window.location.href = `main.html?uname=${username}`;
关于javascript callback的形式实现跨域访问。
//回调函数
function callback(data) {
alert(data.message);
}
</script>
//调用callback函数,并以json数据形式作为阐述传递,完成回调
callback({message:"success"});
jsonp简单实现模式:创建一个回调函数,然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递,完成回调。