08 $.ajax()
Posted xujinglog
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了08 $.ajax()相关的知识，希望对你有一定的参考价值。
1. $.ajax()
1.1 $.ajax()方法概述
作用：发送Ajax请求。
$.ajax({
type: ‘get‘, // 请求方式
url: ‘http://www.example.com‘, // 请求地址
data: { name: ‘zhangsan‘, age: ‘20‘ }, // 请求参数
contentType: ‘application/x-www-form-urlencoded‘, //请求参数格式
beforeSend: function () {
return false // 请求发送前执行函数，可以用来验证参数是否正确
},
success: function (response) {}, // 请求成功
error: function (xhr) {} // GG
});
演示
<body>
<button id="btn">发送请求</button>
<script src="./js/jquery.min.js"></script>
<script>
$(‘#btn‘).on(‘click‘, function() {
$.ajax({
// 请求方式
type: ‘post‘,
// 请求地址
url: ‘http://127.0.0.1:8080/base‘,
// 请求成功以后函数被调用
success: function(response) {
// response为服务器端返回的数据
// 方法内部会自动将json字符串转换为json对象
console.log(response);
},
// 请求失败以后函数被调用
error: function(xhr) {
console.log(xhr)
}
})
});
</script>
</body>
作用：发送jsonp请求
$.ajax({
url: ‘http://www.example.com‘,
// 指定当前发送jsonp请求
dataType: ‘jsonp‘,
// 修改callback参数名称
jsonp: ‘cb‘,
// 指定函数名称
jsonCallback: ‘fnName‘,
success: function (response) {}
})
1.2 serialize方法
作用：将表单中的数据自动拼接成字符串类型的参数
var params = $(‘#form‘).serialize();
// name=zhangsan&age=30
演示
<body>
<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();
console.log(params);
// 循环数组 将数组转换为对象类型
$.each(params, function(index, value) {
result[value.name] = value.value;
})
// 将处理的结果返回到函数外部
// console.log(result);
return result;
}
</script>
</body>
2. $.get()、$.post
作用：$.get方法用于发送get请求，$.post方法用于发送post请求。
$.get(‘http://www.example.com‘, {name: ‘zhangsan‘, age: 30}, function (response) {})
$.post(‘http://www.example.com‘, {name: ‘lisi‘, age: 22}, function (response) {})
3. jQuery中Ajax全局事件
3.1 全局事件
只要页面中有Ajax请求被发送，对应的全局事件就会被触发
.ajaxStart() // 当请求开始发送时触发
.ajaxComplete() // 当请求完成时触发
3.2 NProgress
纳米级进度条
<link rel=‘stylesheet‘ href=‘nprogress.css‘/>
<script src=‘nprogress.js‘></script>
NProgress.start(); // 进度条开始运动
NProgress.done(); // 进度条结束运动以上是关于08 $.ajax()的主要内容，如果未能解决你的问题，请参考以下文章