jquery $.ajaxSetup()

最新推荐文章于 2024-10-19 16:44:09 发布

孤长风

最新推荐文章于 2024-10-19 16:44:09 发布

阅读量276

点赞数

CC 4.0 BY-SA版权

文章标签： $.ajaxSetup() $.ajaxStart() $.ajaxEnd()

本文链接：https://blog.youkuaiyun.com/highflys/article/details/84382093

本文详细介绍了jQuery中的$.ajaxSetup函数的作用、使用方法及与$.ajax、$.ajaxStart和$.ajaxSend的区别，通过实例展示了如何利用$.ajaxSetup设置全局默认选项，以及在不同请求中灵活使用beforeSend函数实现个性化请求前事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

语法

$.ajaxSetup(name:value, name:value, ...)

设置全局 AJAX 默认选项。

既然是全局默认选项，所以，该项中设置的参数会影响所有的$.ajax请求如$.get() $.post() $.ajax等

需要注意的是，如果在请求时重新设置了已参数值，这时请求会用新设置的值，而不是用$.ajaxSetup中默认设置的值。

另外需要提及的是$.ajaxSetup()中与$.ajax()一样，有个beforeSend:function(){}参数，是默认设置在ajax请求前执行的一个函数，该函数与$.ajaxStart()和$.ajaxSend()最大的不同在于beforeSend:function()函数是可重置的，也就是说可以直接针对不同的请求设置不同的beforeSend函数，这就方便了对于不同的请求要求预先显示不同的信息的方法。而不用$.ajaxSend的函数中进行参数判断了。所以，如果想给同一个页面上不同的ajax请求（包括load、get、post）设置不同的loading信息，无疑，给每一个请求设置beforeSend函数是很好的选择，而如果用全局事件$.ajaxSend的话，就需要在内部进行参数验证，靠检测不同的参数值来执行不同的效果，这远不如beforeSend函数方便。

需要着重强调的是，如果试图重新设置$.ajaxStart或$.ajaxSend事件，是不可能的，再次设置只会增加全局事件的执行次数（新设置的全局事件会加到已经设置的事件的后面）而beforeSend函数则不同，可以重新设置。

大家看下面的例子：

<html>
<head>
<script language="javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
$("#ii").click(function(){$.ajaxSetup({cache:false,url:"jx.html",beforeSend:function(){alert("post请求之前");},success:function(result){alert(result);}});
$.post("jx.asp");
});
$("#jj").click(function(){$.ajaxSetup({cache:false,url:"jx.html",beforeSend:function(){alert("get请求之前");},success:function(result){alert(result);}});
$.get();
});
})
</script>
</head>
<body>
<div id="d" name="id" style="width:200px; height:100px;">bbb</div>
<button id="ii">加载</button>
<button id="jj">加载2</button>
</body>
</html>

上面的例子在不同的click事件中都设置了beforeSend函数，这两个函数是互不影响的，对不同的单击事件各自儿独立执行。

但大家再看下面的例子

<html>
<head>
<script language="javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
$("#ii").click(function(){
$("#ii").ajaxSend(function(){alert("post请求");});
$.post("jx.asp",function(a){alert(a);});
});
$("#jj").click(function(){
$("#jj").ajaxSend(function(){alert("get请求");});
$.get("jx.html",function(a){alert(a);});
});
});
</script>
</head>
<body>
<div id="d" name="id" style="width:200px; height:100px;">bbb</div>
<button id="ii">加载</button>
<button id="jj">加载2</button>
</body>
</html>