Jquery ajax 中context的作用

最新推荐文章于 2022-08-08 00:54:20 发布

末贵

最新推荐文章于 2022-08-08 00:54:20 发布

阅读量732

点赞数

分类专栏： Js&JQuery 文章标签： js ajax jquery

本文链接：https://blog.csdn.net/moguicy123/article/details/114638835

版权

Js&JQuery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

概念

ajax中context对象用于设置Ajax相关回调函数的上下文，这些回调包括：
- beforeSend 在发送请求之前调用
- error 在请求出错时调用
- dataFilter 在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数。
- success 当请求之后调用。
- complete 当请求完成之后调用这个函数，无论成功或失败。

在ajax调用中，通过设置context对象，让回调函数内this指向这个对象
如果不设定这个参数，那么this就指向调用本次AJAX请求时传递的options参数，options参数就是$ajax()括号中的内容，通常我们只会设置其中的某部分参数，其实这个参数是比较复杂的，我们可以在其中定义一个自定义参数来观察这种现象。
可以指定一个任意的变量，也可以是一个dom元素作为context参数，这样就设置了success回调函数的上下文为这个指定的变量。就像这样：

因为$.ajax()函数依赖服务器提供的信息来处理返回的数据，所以下面的代码为了在没有运行服务器的情况下可以观察到this的实际效果，所以使用了beforeSend回调函数。

指定一个变量作为context参数

定义了一个infor的字符串变量，来用作context的指定内容
在回调函数中通过this来获取指定的内容

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<script>
$(function(){
var infor="infor test";
$.ajax({
	//这里指定context的内容为上面的test变量
	context:infor,
	beforeSend: function(){
		//这的this等同于test
		alert(this);
	}
});
	
});
</script>
</body>
</html>

指定一个dom元素作为context参数

定义一个.backRed的样式，用于后面的效果叠加
定义一个id为#testDiv的div元素，用于指定为context的内容
通过$(this)来对这个元素进行样式叠加


<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script>
<style>
	.backRed{
		background-color:red;
	}
</style>
</head>
<body>
<div id="testDiv">test </div>
<script>
$(function(){
var infor="infor test";
$.ajax({
	//这里指定context的内容为id=testDiv的div元素
	context:$("#testDiv"),
	beforeSend: function(){
		//这的this等同于test
		$(this).addClass("backRed");
	}
});
	
});
</script>
</body>
</html>