Javaweb 11jQuery的Ajax交互扩展

目录

jQuery的Ajax交互扩展

jQuery的Ajax方法

$.get()简介

$.get()用法

$.post()简介

$.post()用法

$.getJSON()简介

$.getJSON()用法

使用Ajax直接加载页面内容

.load()简介

.load()用法

基于表单数据的Ajax请求

使用jQuery提供的方法简化处理

FastJSON简介

FastJSON API

jQuery让渡$操作符

---

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 );