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部分
- 通过ajax()获取控制器中的数据
- 选项
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对象,如图所示:
最后得到的效果是一样的,控制器中的内容如下:
效果图
- 通过ajax提交数据到控制器
Html部分如上相同;
JQ部分
···· 因为条件是提交数据到控制器,所以要防止在没输入内容的情况下提交,这里需要用到条件语句(if)来判断是否由内容输入,有内容则执行下面代码,无内容则跳出提示框;
- 对于输入框内获取的数据,在没有进行一个字符串拼接前提交到控制器,控制器是接收不到其数据的,字符串拼接法如下:
当然也有更简便的方法,如下:
Serialize:概述:序列表表格内容为字符串。
描述:序列表表格内容为字符串,用于 Ajax 请求。
之后便需要通过data:sur来进行发送(data:发送到服务器的数据。将自动转换为请求字符串格式)控制器内容如下:
控制台输出的效果如下:
(注意:该方法也只能使用post方法提交)