ajax异步请求
AJAX介绍
AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML），它不是一种新的编程语言，而是一种使用现有标准的新方法。
AJAX 基于 JavaScript 和 HTTP 请求（HTTP requests）的，因为AJAX 通过在后台与服务器交换少量数据的方式，允许网页进行异步更新。即在不重载整个页面的情况下，对网页的一部分进行更新，通过 AJAX，你可以创建更好、更快以及更友好的 WEB 应用程序。
当然，Ajax也不是任何资源都可以调用，虽然它可以调用动态页面、静态页面，也可以调用json对象，但是由于浏览器无法解析二进制文件，故调用图片等时就会报错。在调用json对象时，须使用eval（"(" + 返回的对象 + “)”）; ，否则无法解析对象的资源。
$.ajax()使用
项目中，对于使用 $.ajax 获取后台数据是很简单的，根据后台给的接口文档，直接调用就好了。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Ajax 请求</title>
<script src="./jquery.min.js"></script>
</head>
<style>
.result{
width:200px;
height: 200px;
border:1px #0f0 solid;
margin-bottom: 20px;
}
</style>
<body>
<button type="button">使用 ajax请求 获取数据</button>
<div class="result"></div>
<script>
$(function(){
$('button').on('click',function(){
//使用 Ajax 请求方式；
$.ajax({
type:'POST', //请求类型
url:'/getList', //请求路径
dataType:'json', //数据类型
data:{ //提交的参数
id:1
},
success:function(data){ //请求成功后的回调
$('.result').html(data);
},
error:function(XMLHttpRequest, textStatus, errorThrown){ //请求失败后的回调
console.log(textStatus);
}
})
});
});
</script>
</body>
</html>
$.ajax() 常用参数
-
type 类型：String ， 默认值: “GET”。
请求方式 (“POST” 或 “GET”)， 默认为 “GET”。
注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
-
url 类型：String
默认值: 当前页地址。发送请求的地址。
-
async 类型：Boolean ， 默认值: true。
默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
注意：同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
-
beforeSend(XHR) 类型：Function
发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。
XMLHttpRequest 对象是唯一的参数。
这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。
-
cache 类型：Boolean 默认值: true
dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。
jQuery 1.2 新功能。
-
data 类型：String
发送到服务器的数据。将自动转换为请求字符串格式。
GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。
如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:[“bar1”, “bar2”]} 转换为 ‘&foo=bar1&foo=bar2’。
-
dataType 类型：String
预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。
在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:
- “xml”: 返回 XML 文档，可用 jQuery 处理。
- “html”: 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
-
“script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 “cache” 参数。
注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
- “json”: 返回 JSON 数据 。
- “jsonp”: JSONP 格式。使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
- “text”: 返回纯文本字符串
-
success 类型：Function 这是一个 Ajax 事件。
请求成功后的回调函数。
参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。
-
error 类型：Function 这是一个 Ajax 事件。
默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。
有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。
如果发生了错误，错误信息（第二个参数）除了得到 null 之外，还可能是 “timeout”, “error”, “notmodified” 和 “parsererror”。
$.ajax 使用form表单提交 —— 使用FormData对象
// 在使用 new formData() 时，在html 的表单标签中加入 enctype="multipart/form-data" 属性。
var formData = new FormData();
formData.append('uploadPic', $("#upfile")[0].files[0]);
$.ajax({
url:"/submitInfor",
type:"post",
data:formData ,
processData:false, //设置为false 是data值是FormData对象，不需要对数据做处理。
contentType:false, //设置为false 是表单构造了FormData对象，且已声明了属性enctype="multipart/form-data"
success:function(data){
console.log(data);
},
error:function(err){
alert(err);
}
});
上面代码中使用 formData 对象提交数据，方便提交 文件 类型的数据。
参考文档 ： https://www.cnblogs.com/zhuxiaojie/p/4783939.html
$.ajax 使用form表单提交 —— 使用 表单序列化
$.ajax({
url:"/submitInfor",
type:"post",
data: $('form').serialize(), //使用表单序列化提交数据
success:function(data){
console.log(data);
},
error:function(err){
alert(err);
}
});
注意：表单里面的值只能为字符串，要提交的input标签中需要有 name 属性。
当前ajax的功能，还有许多，此处不再叙述，有兴趣可以查看下面文档：
http://www.w3school.com.cn/jquery/ajax_ajax.asp
如有什么疑问，可以在下方评论留言，一起学习！！！
在痛苦中学会成长，在学习中寻找快乐！！！
![微信小程序_提交表单但是感觉没有调用提交函数[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)