ajax异步请求——form表单提交及表单序列化提交

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 lang="en">
<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 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:
1. “xml”: 返回 XML 文档，可用 jQuery 处理。
2. “html”: 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
3. “script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 “cache” 参数。
  注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
4. “json”: 返回 JSON 数据。
5. “jsonp”: JSONP 格式。使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
6. “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

如有什么疑问，可以在下方评论留言，一起学习！！！

在痛苦中学会成长，在学习中寻找快乐！！！