【javaweb简单教程】12.jQuery的Ajax交互扩展和jQuery让渡$操作符

12.jQuery的Ajax交互扩展

jQuery的Ajax方法

• $.ajax()
• $.get()
• $.post()
• $.getJSON()
• .load()
• ……

$.get()

简介

$.get( url [, data] [, success] [, dataType] );

• 参数说明

用法

• 使用$.get() 实现异步交互

$.get( url, data, function( result ) {
	// 省略将服务器返回的数据显示到页面的代码
} );

• 以上代码等价于

$.ajax( {
	"url"           : url,
	"data"        : data,
	"type"        : "get",	//////////////////////////////区别在这
	"success" : function( result ) {
		   // 省略代码
	      }
} );

$.post()

简介

$.post( url [, data] [, success] [, dataType] );

• 参数说明

用法

• 使用$.post() 实现异步交互

$.post( url, data, function( result ) {
	// 省略将服务器返回的数据显示到页面的代码
} );

• 以上代码等价于

$.ajax( {
	"url"           : url,
	"data"        : data,
	"type"        : "post",	  //////////////////////////////区别在这
	"success" : function( result ) {
		   // 省略代码
	      }
} );

$.getJSON()

简介

$.getJSON( url [, data] [, success] );

• 参数说明

用法

• 使用$.getJSON() 实现异步交互

$.getJSON( url, data, function( result ) {
	// 省略将服务器返回的数据显示到页面的代码
} );

• 以上代码等价于

$.ajax( {
	"url"            : url,
	"data"         : data,
	"type"         : "get",		//$.getJSON()方法只能以GET方式发送请求
	"dataType" : "json",	//////////////////////////////区别在这
	"success"   : function( result ) {
		   // 省略代码
	      }
} );

load()

简介

$( selector ).load( url [, data] [, complete] );

• 参数说明

• 注意;
  • .load()不是全局函数，而是针对与选择器匹配的元素执行
  • 包含匿名回调函数，自动将返回值设置为匹配元素的HTML内容

用法

• 使用.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对象
• https://github.com/alibaba/fastjson/releases

FastJSON API

• 入口类：com.alibaba.fastjson.JSON

• 枚举类型 SerializerFeature 定义了多种序列化属性

• 示例

// 包含值为 null 的字段，数值为 null  输出0，String 为 null 输出“”
String  strJSON = JSON.toJSONString ( javaObject,
                                     SerializerFeature.WriteMapNullValue,
                                     SerializerFeature.WriteNullNumberAsZero,
                                     SerializerFeature.WriteNullStringAsEmpty );

jQuery让渡$操作符

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