AJAX请求

这篇文章是AJAX异步文章的附加二：

这篇文章我们将的是$.ajax请求来实现异步的操作

$.ajax请求有很多，但我们主讲jQuery.ajax(url,[settings])、jQuery.get(url, [data], [callback], [type])、jQuery.post(url, [data], [callback], [type])

在开始讲的时候，我们先重新来添加一个视图，页面布局我们就直接复制前面的表单布局，修改一下按钮（见图表1）最终表单的样式

图表 1

$.ajax（）

我们先讲通过jQuery里面的$.ajax（{ }）方法实现异步

先使用$.ajax（）来获取数据和提交数据。获取我们可以用之前转义的方法，这个方法里面就准备了对应的数据，下面receivData方法则是通过形参的方法来接收数据的

使用$.ajax（）从控制器中获取数据

是我们点击的时候获取和提交，我们先分别给两个按钮一个id

我们则通过id获取元素，绑定一个点击事件

绑定事件里面就要发送一个请求，之前我们要var去创建xhr的对象，这里就不需要了，就直接是$.ajax（），不管什么方法调用后面都跟着一个小括号

$.ajax（{ }）方法里面的东西都叫一个配置项，配置项都是以键值对的形式

发送一个请求，首先要知道发送方式是什么，不管什么请求，都要指定是get提交还是post提交。再是一个url，提交的地址。请求完了之后则是一个success，success代表的是请求完了之后的回调函数，回调的时候有一个数据，则通过data去接收数据（注意：这个接收数据的名成年可以自己定义，不一定要是data），然后在控制台输出一下，看我请求到的数据是什么样子的

他返回回来的是一个json的字符串，那我们使用它就必须把json的字符串转换为js的对象

转换为js对象之后，给他们对应的赋值操作，把数据绑定到表单上面的一个操作

我们先要把input表单元素通过id找到然后点val，在是一个赋值，赋值里面有一个name属性值，在页面上刷新点击获取元素就绑定上去了。

他这里还有一些配置项

比如：dataType：规定了数据返回的格式，

如果你配置一个‘html’，那么他返回的是一个html的内容，如果你配置的是json，那么这里规定返回的数据就是一个json，所以下面就不需要在转，就直接输出data即可

详情代码见图表2

图表 2

使用$.ajax（）将视图的表单数据提交到控制器中

通过id选择器获取元素，绑定点击事件

在发送请求之前，我要把表单的数据获取到，怎么获取呢？

先定义一个变量然后在通过”$”元素在通过id元素找到input标签，这获取的是整个元素，而我只需要它输入什么我获取的什么，所以在后面加一个val（）这个方法

获取到数据之后则是去写我们$.ajax（）请求了。$.ajax（）请求和上面获取数据的请求一样

提交数据有一个属性叫data，这个data就是你要传递的数据可以放到这里

我们这里就可以去定一个strData的变量，把我们的数据传递过去，这个参数要和控制器里面接收参数方法的形参数据一样

然后在$.ajax（）放一个data，然后把我们拼接的这个字符串放进来，他就会把我们要提交的数据提交到控制器里面

有一个serialize表单序列化，他就可以不让我们把字符串进行一个拼接，它会生成我们类似拼接的这么一个字符串

如果是序列化的话之前获取的数据可以不做拼接和获取

先声明一个变量，序列化表单就要通过id把表单获取到，然后则是serialize表单序列化，再在控制台进行一个输出，这个结构和我们拼接的结构是一样的

既然是一样那我们控制器断一下点，在提交一下，转到控制器，数据为空，为什么？

序列化的属性值和控制器的属性值不对应，所以这个地方它是接收不到的，因为他们的键不相等，键不相等就不能接收。所以我们再在控制器里面通过实体类的方法去接收它，所以我么接收数据的方式也要进行更改

它还有一个方法，serializeArray：就是把我们序列化的内容序列化成一个数组

它的写法和表单序列化一样，只是序列化的名称改了

serializeArray和serialize这两个序列化都是一样的，只是一个是序列化成数组，一个是序列化成字符串，要是提交，提交的效果也是一样的

将视图的表单数据提交到控制器中的具体代码见图表3

图表 3

$.get（）

下面我们将$.get（）简单来说就是一个get请求，他用来取代复杂的$.ajax的一个方法，它使用起来就更简单，如果只是单纯的请求，就只要两个参数，就是url和callback（回调函数），如果需要提交数据三个参数就可以了，一个url，一个data，一个callback就可以了，type是一个可选参数，是指返回内容的格式是什么

通过$.get（）方法从控制器中获取数据

先在form表单里面在添加两个新的按钮。也可以不添加按钮但是前面写的$.ajax的数据必须全部注销

先通过id选择到元素，绑定一个点击事件

使用get的方法就直接一个$.get（）里面给它传两个参数url和callback，我们前面在控制器中有一个转义获取数据的方法，我们就直接把获取数据的方法直接数据提交到那个方法里面，然后再是一个回调函数，在这个函数里面就可以放一个参数，这个参数就是接收返回回来的数据，然后在控制台输出一下，输出的则是一个json格式的字符串

如果你接收返回返回来的就是一个对象了，就在get方法里面加上第三个参数，在最后面给它一个‘json’返回类型的格式。如果不写第三个参数，就要对这个数据进行一个转换，如何转换？

Data=json.parse（data）仅供参考转换为js对象

转换为js对象我们就可以对他进行操作，帮他绑定在元素上面，绑定元素则和$.ajax（）绑定元素的方法一样

我们先要把input表单元素通过id找到然后点val，在是一个赋值，赋值里面有一个name属性值，在页面上刷新点击获取元素就绑定上去了。（见图表4）

图表 4

使用$.get（）将视图的表单数据提交到控制器的方法中

点击的时候将表单数据提交到控制器的方法中，还是和前面讲的一样，通过id找到input元素，给它绑定一个点击事件

里面我们接着给它一个get，给它传递三个参数；一个url，一个你要提交的数据（还没有定义数据我们先用一个大括号表示），一个提交之后的回调函数，回调函数里面传递一个参数

我提交的数据是不是把页面上获取的数据进行提交，那我们这边则定义一个变量通过id把元素选择到，然后再是点val()。里面不传参数，因为我们是把元素里面的值输入的内容进行一个获取

把所有的值获取到，获取到值之后，把这些值放到get里面第二个参数你要提交的数据里面传递过去，我在第二个参数里面放的是一个大括号，表示我可以把这个数据封装成一个对象放进去

我们可以通过var obj={ }，我这里就声明了一个对象，然后在把这个obj放到第二个参数里面，代替我前面放的那个大括号

创建了这个对象就可以给他赋值，对象里面则是通过键值对的形式存储的，键就是你要传递过去的对应接收，则和控制器中你提交的地址里面的属性对应，值就是前面定义的一个变量

这里我就是把我们获取到的值封装成一个对象，然后把这个对象传过去

在控制器中提交的方法断个点，然后看一下我们提交的数据有没有传递过去

这个还可以在改一下，就是把整个对象做为一个参数，放到get里面第二个参数上面，代替之前的那个obj（见图表5）

图表 5

Get方法讲完了就只有post方法了，post方法和get方法一样只是提交的方式不一样，一个是get，一个是post。我就不一一讲了，具体见下面代码

通过$.post（）方法从控制器中获取数据（见图表6）

如果使用post方法但是你想要通过get提交那就要在控制器的方法中加上jsonRequestBehavior.AllowGet。

jsonRequestBehavior.AllowGet什么意思呢？

就是允许get请求。如果不添加jsonRequestBehavior.AllowGet那就不能通过get请求，就算请求到了也不会获取数据

图表 6

通过$.post（）方法将视图中的表单数据提交到控制器的方法中。我这里是使用序列化表单比前面的要简单一点（见图表7）

图表 7

AJAX异步--ajax请求相关推荐

ajax get 缓存 ie,Ajax异步同步请求被IE缓存的问题解决方法(get方式)
Ajax异步同步请求被IE缓存的问题解决方法(get方式) 分类:Javascript| 发布:佚名| 查看: | 发表时间:2014/1/20 折腾了半天,程序中使用jquery的load方法进行请 ...
Ajax 异步同步请求
XMLHttpRequest 支持同步和异步通信.但是,一般来说,出于性能原因,异步请求应优先于同步请求.同步请求阻止代码的执行,这会导致屏幕上出现"冻结"和无响应的用户体验. 一 ...
JavaWeb.Ajax(异步数据请求)
目录什么是Ajax? 加载数据的方式通过 HTTP 请求加载远程数据( $.ajax()) 通过远程 HTTP POST 请求载入信息($.post()/$.get()) 案例使用Ajax完成无 ...
为什么要用promise处理ajax,用promise.all解决ajax异步循环请求问题
Promise.all() 并不能解决循环的问题,一般情况下 .all() 的参数是 Promise 数组(暂时不考虑其它类似).那么,数组中的每个 Promise 都代表着一个异步操作,Promis ...
Ajax异步（7）前端
1 Ajax概述 AJAX 即"Asynchronous Javascript And XML"(异步 JavaScript和 XML),是指一种创建交互式.快速动态网页应用的 ...
php 返回字符串给aja,解决ajax异步请求返回的是字符串问题
1.返回结果差异 js获取后打印res.code无结果.因为返回数据格式不正确. php文件添加header头: header('Content-Type:application/json;'); 或 ...
html弹窗赋值给查询框,bootstrap模态框动态赋值， ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框（JS）...
/查询单个 function query(id) { $.ajax({ url : "/small/productServlet", async : true, type : &q ...
Ajax异步请求-简单模版
1 <script type="text/javascript"> 2 window.onload = function () { 3 document.getElem ...
php中jquery ajax请求参数,浅谈Jquery中Ajax异步请求中的async参数的作用
之前不知道这个参数的作用,上网找了前辈的博客,在此收录到自己的博客,希望能帮到更多的朋友: test.html asy.js function testAsync{ var temp; $.ajax( ...

AJAX异步--ajax请求