目录
jQuery的Ajax交互扩展
jQuery的Ajax方法
$.ajax()
$.get()
$.post()
$.getJSON()
.load()
$.get()简介
$.get( url [, data] [, success] [, dataType] );
| 参 数 | 类 型 | 说 明 |
|---|---|---|
| url | String | 必选，发送请求的地址 |
| data | PlainObject 或 String | 发送到服务器的数据 |
| success | Function( PlainObject result, String textStatus, jqXHR jqxhr ) | 请求成功后调用的函数参数result：可选，由服务器返回的数据 |
| dataType | String | 预期服务器返回的数据类型，包括：XML、HTML、Script、JSON、JSONP、text |
$.get()用法
使用$.get() 实现异步交互
$.get( url, data, function( result ) {
// 省略将服务器返回的数据显示到页面的代码
} );
**以上代码等价于**
$.ajax( {
"url" : url,
"data" : data,
"type" : "get",
"success" : function( result ) {
// 省略代码
}
} );$.post()简介
$.post( url [, data] [, success] [, dataType] );
| 参 数 | 类 型 | 说 明 |
|---|---|---|
| url | String | 必选，发送请求的地址 |
| data | PlainObject 或 String | 发送到服务器的数据 |
| success | Function( PlainObject result, String textStatus, jqXHR jqxhr ) | 请求成功后调用的函数参数result：可选，由服务器返回的数据 |
| dataType | String | 预期服务器返回的数据类型，包括：XML、HTML、Script、JSON、JSONP、text |
$.post()用法
使用$.post() 实现异步交互
$.post( url, data, function( result ) {
// 省略将服务器返回的数据显示到页面的代码
} );
**以上代码等价于**
$.ajax( {
"url" : url,
"data" : data,
"type" : "post",
"success" : function( result ) {
// 省略代码
}
} );$.getJSON()简介
$.getJSON( url [, data] [, success] );
| 参 数 | 类 型 | 说 明 |
|---|---|---|
| url | String | 必选，发送请求的地址 |
| data | PlainObject 或 String | 发送到服务器的数据 |
| success | Function( PlainObject result, String textStatus, jqXHR jqxhr ) | 请求成功后调用的函数参数result：可选，由服务器返回的数据 |
$.getJSON()用法
使用$.getJSON() 实现异步交互
$.getJSON( url, data, function( result ) {
// 省略将服务器返回的数据显示到页面的代码
} );
**以上代码等价于**
$.ajax( {
"url" : url,
"data" : data,
"type" : "get",
"dataType" : "json",
"success" : function( result ) {
// 省略代码
}
} );
$.getJSON()方法只能以GET方式发送请求使用Ajax直接加载页面内容
复杂结构的响应数据
还可以由服务器直接生成HTML片段，客户端直接套用到页面中
.load()简介
$( selector ).load( url [, data] [, complete] );
| 参 数 | 类 型 | 说 明 |
|---|---|---|
| url | String | 必选，发送请求的地址 |
| data | PlainObject 或 String | 发送到服务器的数据 |
| complete | Function( String responseText, String textStatus, jqXHR jqxhr ) | 对每个匹配元素设置完内容后都会触发的函数参数responseText：可选，服务器返回的数据 |
.load()不是全局函数，而是针对与选择器匹配的元素执行
包含匿名回调函数，自动将返回值设置为匹配元素的HTML内容
.load()用法
使用.load()实现异步交互
$( "#opt_area>ul" ).load( url, data );
**以上代码等价于**
$.get( url, data, function( responseText ) {
$( "#opt_area>ul" ).html( responseText );
} );
默认使用GET方式请求，除非data参数是一个对象，则使用POST方式
基于表单数据的Ajax请求
使用jQuery提供的方法简化处理
.serializeArray()
$.param()
.serializeArray()
检测一组表单元素中的有效控件
没有被禁用
必须有name属性
选中的checkbox或radio
触发提交事件的submit按钮
file元素不会被序列化
将有效控件序列化为JSON对象数组
包含name和value两个属性
$.param()
将由. serializeArray()生成的对象数组序列化成请求字符串的形式
nid=nid的值&cauthor=cauthor的值&cip=cip的值
jQuery还提供了.serialize()方法。
.serialize()内部使用$.param()对.serializeArray()做了一个简单包装。不需要中间环节时，可以更简便地完成表单数据的序列化
FastJSON简介
随着JSON的广泛使用，在服务器端生成JSON字符串成了一件麻烦的工作，效率低且易出错
FastJSON
一个性能很好的、Java实现的JSON解析器和生成器
将Java对象序列化成JSON字符串
将JSON字符串反序列化得到Java对象
Releases · alibaba/fastjson · GitHub
FastJSON API
入口类：com.alibaba.fastjson.JSON
| 方 法 | 说 明 |
|---|---|
| public static String toJSONString ( Object object ) | 将Java对象序列化成JSON字符串 |
| public static String toJSONString ( Object object,boolean prettyFormat ) | prettyFormat为true时生成带格式的JSON字符串 |
| public static String toJSONString ( Object object, SerializerFeature… features ) | 可以通过参数features指定更多序列化规则 |
| public static String toJSONStringWithDateFormat ( Object object, String dateFormat, SerializerFeature… features ) | 可以通过参数dateFormat指定日期类型的输出格式 |
枚举类型 SerializerFeature 定义了多种序列化属性
| 枚 举 值 | 说 明 |
|---|---|
| QuoteFieldNames | 为字段名加双引号，默认即使用 |
| WriteMapNullValue | 输出值为nul的字段，默认不输出 |
| WriteNullListAsEmpty | 将值为null的List字段输出为[ ] |
| WriteNullStringAsEmpty | 将值为null的String字段输出为“” |
| WriteNullNumberAsZero | 将值为null的数值字段输出为0 |
| WriteNullBooleanAsFalse | 将值为null的Boolean字段输出为false |
| SkipTransientField | 忽略transient字段，默认即忽略 |
| PrettyFormat | 格式化JSON字符串，默认不格式化 |
// 包含值为 null 的字段，数值为 null 输出0，String 为 null 输出“”
String strJSON = JSON.toJSONString ( javaObject,
SerializerFeature.WriteMapNullValue,
SerializerFeature.WriteNullNumberAsZero,
SerializerFeature.WriteNullStringAsEmpty );FastJSON API
jQuery不是唯一使用 $ 的脚本库，项目中有其他同样使用 $ 的脚本库时就会引起冲突
// Prototype的 $ 会覆盖jQuery的 $
<script type="text/javascript" src="../js/jquery-1.12.4.min.js" />
<script type="text/javascript" src="../js/prototype.js" />
或者
// jQuery的 $ 会覆盖Prototype的 $
<script type="text/javascript" src="../js/prototype.js" />
<script type="text/javascript" src="../js/jquery-1.12.4.min.js" />jQuery定义了jQuery.noConflict()方法，放弃对$的使用权，以免与其他脚本库冲突
jQuery.noConflict(); // 让渡$使用权，后续jQuery代码使用jQuery代替$
jQuery( document ).ready( … );
或者重新指定一个替代符号：
var $j = jQuery.noConflict(); // 让渡$使用权，并指定用 $j 代替$
$j( document ).ready( … );改变了jQuery的编码风格，烦琐且不利于重用已有代码
jQuery.noConflict(); // 让渡$使用权，其他脚本库可以使用$
jQuery( document ).ready( function( $ ) {
// 在这里继续使用$编写jQuery代码
$( "#show" ).click( … );
} );
或者
jQuery.noConflict(); // 让渡$使用权，其他脚本库可以使用$
( function( $ ) {
// 在这里继续使用$编写jQuery代码
$( document ).ready( function() {
$( "#show" ).click( … );
} );
} )( jQuery );