英特网校

ajax标准格式及实际开发中常见问题

AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。 在前端开发中应用十分广泛,如:无刷新上传图片,分页、选项卡切换,地图加载。提高了前端的体验感。在网站开发中是非常重要的技术。

Ajax标准格式:[利用jquery中的ajax函数,原生js会出现兼容问题]

$.ajax({
async:true, //请求是否异步,默认为异步(true)重要参数[重要]
url: ajaxurl, //请求的url地址[重要]
data:query,//发送请求数据
type: "POST",[重要] //发送方式,如果有data数据时,type=get,后台利用get获取参数,type=post,后台利用post获取参数,如果没有发送数据,两种类型都可以
dataType: "json",[重要]
//数据类型,一般为json格式,有些时候可以为html/text
beforeSend:function(){ //请求前的处理 },
success: function(result){//成功处理函数,result为返回结果 },[重要]
error:function(){//失败处理函数}
complete:function(){//请求完成的处理},
});

 开发中遇到的问题:

1)、开发中有些时候需要本地访问网站中提供的接口数据:如本机需要访问

www.intewl.com里面某个接口时,由于本地的地址为127.0.0.1(或localhost),此时因为链接不同,出现跨域问题ajax不能获取数据。

解决方法:利用JsonBird解决远程数据跨域问题

ajax中请求地址前添加https://bird.ioliu.cn/v1/?url=

最终请求地址为:https://bird.ioliu.cn/v1/?url=www.intewl.com,这样就可以实现跨域请求

2)、控制台提示404错误

这类错误的原因比较多,但是总的来讲就是请求的资源找不到,遇到这类错误需要首先检查一下请求的URL地址是否正确,或者请求的地址是否有效。

3)、500系列错误

500系列的错误一般都来自于服务器端,常见的错误原因有:后端代码是否有问题?

4)、需要获取ajax的返回值

定义一个全局变量,在success中将后台数据赋值给全局变量,在ajax调用完成后返回全局变量代码如下:

var check_res;[定义全局变量]
function get(){//函数名可以自行定义
$.ajax({
async:false,[设置是否异步]
url: ajaxurl,
data:query,
type: "POST",
dataType: "json",
success: function(result){
check_res=result;
}
});
return check_res;放回结果
}

其中红色部分必须添加,才能获取到返回结果!

 


评论中心

登录后可评论,请 登录 注册