Ajax获取与提交控制器的数据

Ajax ( url,[ settings ])

概述：通过 HTTP 请求加载远程数据，jQuery底层AJAX实现，简单易用的高层实现见 $.get, $.post等，$.ajax()返回其创建的XMLHttpRequest对象，大多是情况下我们无须直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性，最简单的情况下，$.ajax()可以不带任何参数直接使用。

参数：（url,[ settings ]）

url: 一个用来包含发送请求的URL字符串；

settings：AJAX请求设置，所有选项都是可选的；

数据类型：

$.ajax()函数依赖服务器提供的信息来处理返回的数据。如果服务器报告说返回的数据是XML，那么返回的结果就可以用普通的XML方法或者jQuery的选择器来遍历。如果见得到其他类型，比如HTML，则数据就以文本形式来对待，通过dataType选项还可以指定其他不同数据处理方式。除了单纯的XML，还可以指定 html、json、jsonp、script或者text。（其中，text和xml类型返回的数据不会经过处理。数据仅仅简单的将XMLHttpRequest的responseText或responseHTML属性传递给success回调函数，）

 

案例：

Html部分

 

这里的布局用到了bootstrap框架的form表单实现的一个页面布局。

JQ部分

1. 通过ajax（）获取控制器中的数据
2. 

 

1. 选项   

Type：请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

url: 发送请求的地址。(默认: 当前页地址);

datatype: 预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如XML MIME类型就被识别为XML。

可用值：

"xml": 返回 XML 文档，可用 jQuery 处理。

"html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。

"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意：'''在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)

"json": 返回 JSON 数据 。

"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。

"text": 返回纯文本字符串。

Success(data, textStatus, jqXHR): 请求成功后的回调函数。参数：由服务器返回，并根据dataType参数进行处理后的数据；

· 当打完这两段选项后，选择不输入选项dataType：“json”,然后通过请求成功后的回调函数获取其参数，在到控制台输出，如图：    

 

·会得到一串json形式的字符串，因为要将内容输入到页面的指定位置，所以我们需要将其转换为JS对象，可用通过两种方法进行转换一种是上面以及提到的，另一种就是通过JSON.parse()方法，它也可将json格式的字符串转换成js对象，如图所示:

 

最后得到的效果是一样的，控制器中的内容如下：

效果图

 

1. 通过ajax提交数据到控制器

Html部分如上相同；

JQ部分

 

···· 因为条件是提交数据到控制器，所以要防止在没输入内容的情况下提交，这里需要用到条件语句（if）来判断是否由内容输入，有内容则执行下面代码，无内容则跳出提示框；

• 对于输入框内获取的数据，在没有进行一个字符串拼接前提交到控制器，控制器是接收不到其数据的，字符串拼接法如下：
• 

 

当然也有更简便的方法，如下：

 

Serialize：概述：序列表表格内容为字符串。

描述:序列表表格内容为字符串，用于 Ajax 请求。

之后便需要通过data：sur来进行发送（data：发送到服务器的数据。将自动转换为请求字符串格式）控制器内容如下：

 

控制台输出的效果如下：

 

（注意：该方法也只能使用post方法提交）