javascript - ajax请求运用同一个请求函数发送有查询参数和无查询参数发生问题？
本文介绍了javascript - ajax请求运用同一个请求函数发送有查询参数和无查询参数发生问题？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script>
function get(url,options,callback){
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if (xhr.readyState==4){
if((xhr.status>=200 && xhr.status<300) || xhr.status==304){
callback(xhr.responseText);
}else{
alert("request failed:"+xhr.status);
}
}
}
xhr.open("get",url+"?"+serialize(options),true);
xhr.send(null);
}
/*请求参数序列化*/
function serialize(data){
if(!data) return '';
var pairs=[];
for (var name in data){
if(!data.hasOwnProperty(name)) continue;
if(typeof data[name]==='function') continue;
var value=data[name].toString();
name=encodeURIComponent(name);
value=encodeURIComponent(value);
pairs.push(name+'='+value);
}
return pairs.join('&');
}
function huidiao(data){
var data = JSON.parse(data);
console.log(data.list[0]);
}
get('http://study.163.com/webDev/couresByCategory.htm',{pageNo:1,psize:20,type:10},huidiao);//请求1
get('http://study.163.com/webDev/hotcouresByCategory.htm',huidiao);//请求2
</script>
</html>
该代码可直接运行。我现在创建了一个ajax请求函数，其中包括发送查询参数。
运用这个get函数发起两个请求，根据设计的接口，请求需要查询参数，请求2不需要参数。
已经确认查询参数是没有错的。
请求1有查询参数，结果可以成功返回结果
请求2是没有查询参数的，结果报错Uncaught TypeError: callback is not a function
如果修改get函数，去掉传入查询参数，和查询参数的处理部分，只运行请求2，可以成功返回数据。
问题1：报错的原因是什么？明明有把huidiao这一个函数当作参数传进去了啊为什么不能识别出callback就是huidiao？
问题2：请问如果像这样函数里需要传入参数，并会对参数进行处理的，如果没有传入（可能有些情况并不需要），那么函数会忽略需要传入参数部分还是会怎么样？
像这样怎么写一个函数，可以兼容这两种情况，需要传参数的时候可以用，不需要传参数的时候也可以用？
那我改了还是不行？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script>
function get(url,callback,options){**//修改1**
var xhr=new XMLHttpRequest();
console.log(options==undefined);
xhr.onreadystatechange=function(){
if (xhr.readyState==4){
if((xhr.status>=200 && xhr.status<300) || xhr.status==304){
callback(xhr.responseText);
}else{
alert("request failed:"+xhr.status);
}
}
}
if(options==undefined){**//修改2**
xhr.open("get",url,true);
}
else{
xhr.open("get",url+"?"+serialize(options),true);
}
xhr.send(null);
}
/*请求参数序列化*/
function serialize(data){
if(!data) return '';
var pairs=[];
for (var name in data){
if(!data.hasOwnProperty(name)) continue;
if(typeof data[name]==='function') continue;
var value=data[name].toString();
name=encodeURIComponent(name);
value=encodeURIComponent(value);
pairs.push(name+'='+value);
}
return pairs.join('&');
}
function huidiao(data){
var data = JSON.parse(data);
console.log(data.list);
}
get('http://study.163.com/webDev/couresByCategory.htm',huidiao,{pageNo:1,psize:20,type:10});//请求1
get('http://study.163.com/webDev/hotcouresByCategory.htm',huidiao);//请求2
//**修改3**
</script>
</html>解决方案
请求二只传入了2个参数，而get函数里面第三个参数才是回调。
function get(url,options,callback){
callback === undefined && $.isFunction(options) && (callback = options); // 所以这里要先进行判断
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if (xhr.readyState==4){
if((xhr.status>=200 && xhr.status<300) || xhr.status==304){
callback && callback(xhr.responseText);
}else{
alert("request failed:"+xhr.status);
}
}
}
xhr.open("get",url+"?"+serialize(options),true);
xhr.send(null);
}
这篇关于javascript - ajax请求运用同一个请求函数发送有查询参数和无查询参数发生问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
