[学习笔记] 动态网页开发基础之Ajax交互扩展

# 学习 # · 2020-09-28

jQuery实现Ajax的方法

1、$.get()方法:是jQuery封装的发送HTTP GET请求从服务器加载数据的Ajax方法。

//基本语法
$.get(url[,data][,success][,dataType]);

//String url:请求发送的URL
//PlainObject或String data:请求发送的数据
//function success:请求成功后调用的函数
//dataType:预期服务器返回的数据类型

2、$.post()方法:是jQuery封装的发送HTTP POST请求从服务器加载数据的Ajax方法。

//基本语法
$.post(url[,data][,success][,dataType]);

3、$.getJSON()方法:只能以GET方式发送请求。

//基本语法
$.getJSON(url[,data][,success]);

使用Ajax直接加载页面内容

1、使用Ajax返回HTML内容:

//设置dateType
$.ajax({
    "dateType":"html"
});

function callback(data) {
    //Servlet直接返回html代码,回调函数中直接使用
    $("li").html(data);
}

2、.load()方法:

//基本语法
$(selector).laod(url[,data][,complete]);

//function complete:对每个匹配的元素设置完内容后都会触发该函数

基于表单数据的Ajax请求

1、使用jQuery解析表单数据:

var $formArea = $(".myForm");    //定位表单
var $inputArea = $formArea.find(":input");    //获取表单的所有元素

var paramsArray = $inputArea.serializeArray();    //将表单的有效控件编码成数组格式
var queryString = $.param(paramsArray);        //将数据序列化成请求字符串

//发送POST请求
$.post("UserServlet", queryString, callback, "json");

2、表单的有效控件:

(1)元素不能被禁用。

(2)元素必须有name属性。

(3)选中的checkbox才是有效的。

(4)选中的radio才是有效的。

(5)只有触发提交事件的submit按钮才是有效的。

(6)file元素不会被序列化。

3、Servlet实现:接受数据并进行相关逻辑处理。服务端处理后,不再进行跳转,直接将处理结果以JSON格式响应回客户端。


使用FastJSON生成JSON字符串

1、FastJSON:由Java语言实现的JSON解析器和生成器,来自阿里巴巴。FastJSON提供了把Java对象序列化成JSON字符串、以及将JSON字符串反序列化得到Java对象的功能。

2、FastJSON的GiuHub:https://github.com/alibaba/fastjson/releases

3、使用FastJSON API:

(1)入口类:com.alibaba.fastjson.JSON

//将Java对象序列化成JSON字符串
public static String toJSONString (Object object)

//prettyFormat为true时生成带格式的JSON字符串
public static String toJSONString (Object object, boolean prettyFormat)

//可以通过参数features指定更多序列化规则
public static String toJSONString (Object object, SerializerFeature… features)

//可以通过参数dateFormat指定日期类型的输出格式
public static String toJSONStringWithDateFormat (Object object, String dateFormat, SerializerFeature… features)

(2)枚举类型SerializerFeature定义了多种序列化属性:

QuoteFieldNames        //为字段名加双引号,默认即使用
WriteMapNullValue    //输出值为null的字段,默认不输出
WriteNullListAsEmpty    //将值为null的List字段输出为[]
WriteNullStringAsEmpty    //将值为null的String字段输出为""
WriteNullNumberAsZero    //将值为null的数值字段输出为0
WriteNullBooleanAsFalse    //将值为null的Boolean字段输出为false
SkipTransientField        //忽略transient字段,默认即忽略
PrettyFormat    //格式化JSON字符串,默认不格式化

jQuery让渡 $操作符

1、jQuery不是唯一使用 $ 的脚本库,项目中有其他同样使用 $ 的脚本库时就会引起冲突。

// Prototype的 $ 会覆盖jQuery的 $
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="prototype.js"></script>

// jQuery的 $ 会覆盖Prototype的 $
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>

2、jQuery定义了jQuery.noConflict()方法,放弃对$的使用权,以免与其他脚本库冲突。

//方案一:让渡$使用权,后续jQuery代码使用jQuery代替$
jQuery.noConflict();
jQuery( document ).ready( … );

//方案二:重新指定一个替代符号,让渡$使用权,并指定用 $j 代替$
var  $j = jQuery.noConflict();
$j( document ).ready( … );
如无特殊说明,本博所有文章均为博主原创。

如若转载,请注明出处:一木林多 - https://www.l5v.cn/archives/128/

评论