ajax_2">一、$.ajax()
1、概念
原生的 ajax 发送请求时,操作繁琐,代码量多。jQuery对这些操作进行了封装,使操作步骤更加简单,其中最基本、最底层的方法就是 $.ajax() 方法 。
2、常用的方法参数
名称 | 描述 |
---|---|
url | 请求地址,默认为当前页面 |
data | 发送到服务器的请求参数 |
type | 请求方式,get 或 post |
async | 布尔值,表示请求是否异步处理。默认是 true |
jsonp | 在一个 jsonp 请求中重写回调函数的名称 |
jsonpCallback | 在一个 jsonp 请求中指定回调函数的名称 |
contentType | 发送数据到服务器时所使用的内容类型。默认是:“application/x-www-form-urlencoded”。 |
timeout | 设置本地请求超时时间 |
beforeSend() | 发送请求前运行的函数。 |
success() | 请求成功时执行的函数 |
error() | 请求失败时执行的函数 |
complete() | 请求完成时运行的函数(在请求成功或失败之后均调用,即在 success 和 error 函数之后) |
3、基本使用
<button id="btn">发送请求</button>
<script src="/js/jquery.min.js"></script>
<script>
var params = {name: 'wangwu', age: 300}
$('#btn').on('click', function () {
$.ajax({
// 请求方式
type: 'post',
// 请求地址
url: '/user',
// 向服务器端发送的请求参数
// name=zhangsan&age=100
// data: {
// name: 'zhangsan',
// age: 100
// },
data: JSON.stringify(params),
// 指定参数的格式类型
contentType: 'application/json',
// 请求成功以后函数被调用
success: function (response) {
// response为服务器端返回的数据
// 方法内部会自动将json字符串转换为json对象
console.log(response);
}
})
});
</script>
4、发送 jsonp 请求
<button id="btn">发送请求</button>
<script src="/js/jquery.min.js"></script>
<script>
// 定义的全局作用域的函数
function fn (response) {
console.log(response)
}
$('#btn').on('click', function () {
$.ajax({
url: '/jsonp',
// 向服务器端传递函数名字的参数名称
jsonp: 'cb',
// 指定函数名称
jsonpCallback: 'fn',
// 代表现在要发送的是jsonp请求
dataType: 'jsonp',
success: function (response) {
console.log(response)
}
})
});
</script>
5、serialize() / serializeArray()
概念:
serialize() 方法可以将 jQuery 获取的表单元素的数据自动拼接成参数字符串的形式。只会将提交成功的表单元素内容序列化为字符串,提交失败的表单元素会被放弃。而且想要表单元素的值包含到序列字符串中,元素必须包含 name 属性。
serializeArray() 方法是将 jQuery 获取的表单元素的数据 拼接成一个对象数组,数组元素具有两个属性:name 和 value 。
案例代码:
<form id="form">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="提交">
</form>
<script src="/js/jquery.min.js"></script>
<script type="text/javascript">
$('#form').on('submit', function () {
// 将表单内容拼接成字符串类型的参数
// var params = $('#form').serialize();
// console.log(params)
serializeObject($(this));
return false;
});
// 将表单中用户输入的内容转换为对象类型
function serializeObject (obj) {
// 处理结果对象
var result = {};
// [{name: 'username', value: '用户输入的内容'}, {name: 'password', value: '123456'}]
var params = obj.serializeArray();
// 循环数组 将数组转换为对象类型
$.each(params, function (index, value) {
result[value.name] = value.value;
})
// 将处理的结果返回到函数外部
return result;
}
</script>
二、$.get()
1、概念
$.get(URL,[data],callback); 第一个参数是要请求的地址,第二个参数是要发送到服务器的参数数据,可以不写,第三个参数是请求成功后多执行的函数。
是将$.ajax() 二次封装的结果。
2、案例代码
<button id="btn">发送请求</button>
<script src="/js/jquery.min.js"></script>
<script>
$('#btn').on('click', function () {
$.get('/base', 'name=zhangsan&age=30', function (response) {
console.log(response)
})
});
</script>
三、$.post()
1、概念
$.post(URL,[data],callback); 第一个参数是要请求的地址,第二个参数是要发送到服务器的参数数据,可以不写,第三个参数是请求成功后多执行的函数。
是将$.ajax() 二次封装的结果。
2、案例代码
<button id="btn">发送请求</button>
<script src="/js/jquery.min.js"></script>
<script>
$('#btn').on('click', function () {
$.post('/base', function (response) {
console.log(response)
})
});
</script>
四、全局事件
ajaxStart_174">1、ajaxStart()
概念:
ajaxStart() 方法在 AJAX 请求发送前执行函数。它是一个 Ajax 事件。无论在何时发送 Ajax 请求,jQuery 都会检查是否存在其他 Ajax 请求。如果不存在,则 jQuery 会触发该 ajaxStart 事件。在此时,由 .ajaxStart() 方法注册的任何函数都会被执行。
案例代码:
$("#loading").ajaxStart(function(){
$(this).show();
});
ajaxStop_188">2、ajaxStop()
概念:
ajaxStop() 方法在 AJAX 请求结束时执行函数。它是一个 Ajax 事件。无论 Ajax 请求在何时完成 ,jQuery 都会检查是否存在其他 Ajax 请求。如果不存在,则 jQuery 会触发该 ajaxStop 事件。在此时,由 .ajaxStop() 方法注册的任何函数都会被执行。
案例代码:
$("div").ajaxStop(function(){
alert("所有 AJAX 请求已完成");
});
五、其他常用方法
方法 | 描述 |
---|---|
load() | 从服务器加载html数据,然后把返回到 HTML 放入匹配元素。 |
$.getJSON | 使用 GET 请求从服务器加载 JSON 编码数据。 |
$.getScript | 使用 GET 请求从服务器加载 JavaScript 文件,然后执行该文件。 |
abort() | 可以中途中止ajax请求。 |