Ajax交互扩展

最新推荐文章于 2024-10-15 10:22:14 发布

ziWz

最新推荐文章于 2024-10-15 10:22:14 发布

阅读量101

点赞数

文章标签： ajax Powered by 金山文档

本文链接：https://blog.csdn.net/m0_71540905/article/details/129359126

版权

$.ajax()

$.ajax({
  "url": "http://localhost:8080/JavaWeb_l_Jsp/AjaxClass1",
  "type": "POST",
  "data":"name="+username,
  "dataType": "text",
  "success": function(data){
   //逻辑代码
  }
});

$.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

$.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

$.getJSON()

$.getJSON()方法是$.get()方法的简写方式，默认指定了参数"dataType"的值为"json"

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

常用参数

参数	类型	说明
url	String	必选，发送请求的地址
data	PlainObject 或 String	发送到服务器的数据
success	Function(PlainObject result, String textStatus, jqXHR jqxhr)	请求成功后调用的函数参数result：可选，服务器返回的数据

serializeArray()

检测一组表单元素中的有效控件

没有被禁用

必须有name属性

选中的checkbox或radio

只有触发提交事件的submit按钮才是有效的

file元素不会被序列化

将有效控件序列化为JSON对象数组

包含name和value两个属性

{
    
        {
    name:"nickname",
    value:"安琪虾"
    }, 
        {
    name:"email",      
value:"anqi@126.com"
    }, 
        {
    name:"sign",
    value:"缝缝补补又是一年"
    }

}

$.param()

将由. serializeArray()生成的对象数组序列化成请求字符串的形式

nickname=安琪虾&email=anqi@126.com&sign=缝缝补补又是一年

jQuery提供了.serialize()方法

用于简化获取表单内容 + 序列化请求字符串实现方案

.serialize()方法内部使用$.param()方法对.serializeArray()方法进行了包装，可以更简便地完成表单数据的序列化

使用.serialize()方法序列化表单数据

var queryString = $updateUserInputs.serialize();

.load()

.load()方法可以简化通过Ajax请求加载HTML内容的操作

通过发送Ajax请求从服务器加载数据，并把响应的数据直接添加到调用该方法的元素中

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

常用参数

参数	类型	说明
url	String	必选，发送请求的地址
data	PlainObject 或 String	发送到服务器的数据
complete	Function(String responseText, String textStatus, jqXHR jqxhr)	对每个匹配的元素设置完内容后都会触发该函数 responseText：服务器返回的数据

FastJSON

一个Java实现的JSON解析器和生成器

将Java对象序列化成JSON字符串

将JSON字符串反序列化为Java对象

性能好

阿里巴巴的开源库

下载地址：https://github.com/alibaba/fastjson/releases

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	输出JSON的字段名时使用双引号，默认即使用
WriteMapNullValue	输出值为null的字段，默认不输出
WriteNullListAsEmpty	将值为null的List字段输出为[ ]
WriteNullStringAsEmpty	将值为null的String字段输出为""
WriteNullNumberAsZero	将值为null的数值字段输出为0
WriteNullBooleanAsFalse	将值为null的Boolean字段输出为false
SkipTransientField	忽略transient字段，默认即忽略
PrettyFormat	格式化JSON字符串，默认不格式化

Promise对象

异步编程的一种解决方案

保存着某个未来才会结束的事件的结果，可以理解为一个容器

特点

对象的状态不受外界影响，只有异步操作的结果可以决定当前状态

三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）

一旦状态改变，就不会再变，任何时候都可以得到这个结果

缺点

无法取消Promise，一旦新建就会立即执行，无法中途取消

如果不设置回调函数，Promise内部抛出的错误将不会反映到外部

当处于pending状态时，无法得知目前的进展到哪一个阶段

Promise对象的基本用法

const promise = new Promise( function(resolve, reject) {
 
   if (/* 异步操作成功 */){ resolve(value);
    
   } else { reject(error); 
   }
   });
   
promise.then( function(value) {
    /* success */},function(error) {
     /* failure */
     });

resolve和reject是两个函数，由JavaScript引擎提供

resolve函数：异步请求成功时调用，将Promise对象的状态从“pending“变为“fulfilled“，将操作结果作为参数传递出去

reject函数：异步请求失败时调用，将Promise对象的状态从“pending”变为“rejected“，将报错信息作为参数传递出去

then()方法接受两个回调函数作为参数

可以指定fulfilled状态和rejected状态的回调函数

Promise实例创建成功后调用

Promise对象方法

名称	说明
Promise.prototype.then( onFulfilled[,onRejected]):Promise	返回一个新的Promise实例
Promise.prototype.catch( onRejected):Promise	指定发生错误时的回调函数
Promise.prototype.finally( onFinally):Promise	无论Promise对象最后状态如何，都会执行的操作
Promise.all(iterable):Promise	用于将多个 Promise 实例，包装成一个新的 Promise 实例
Promise.race(iterable):Promise	类似于all()方法，返回获得结果最快的Promise实例

then()方法

使用then()方法返回一个Promise对象

getJSON("/post/1.json").then(function (post) {
    return getJSON(post.commentURL);
}).then(function funcA(comments) {
    console.log("resolved: ", comments);
}, function funcB(err) {
    console.log("rejected: ", err);
});

第一个then()方法指定的回调函数，返回一个Promise对象

第二个then()方法指定的回调函数，会等待这个新的Promise对象状态发生变化

如果变为fulfilled，调用funcA()

如果状态变为rejected，调用funcB()

catch()方法和finally()方法

catch()方法用于指定发生错误时的回调函数

getJSON('/posts.json').then(function (posts) {
// ...
}).catch(function (error) {
console.log('发生错误！', error);
});

无论Promise对象最后状态如何，都会执行finally()方法

回调函数不接受任何参数

如果使用then()方法，同样的方法语句需要为成功和失败各写一次

Promise.resolve(2).then(() => { }, () => { });// resolve 的值是 undefined
Promise.resolve(2).finally(() => { });// resolve 的值是 2
Promise.reject(3).then(() => { }, () => { });    // reject 的值是 undefined
Promise.reject(3).finally(() => { });    // reject 的值是 3

all()方法

使用map()方法生成了一个包含6个Promise对象的数组

const promises = [2, 3, 5, 7, 11, 13].map(function (id) {
    // 生成一个Promise对象的数组
    
 return getJSON('/post/' + id + ".json");
 });

使用all()方法将该数组包装成一个新的Promise实例

Promise.all(promises).then(function (posts) {
    // ...
 
}).catch(function (reason) { })

只有这 6 个对象的状态都变成fulfilled，或者其中有一个变为rejected，才会调用Promise.all()方法后面的回调函数

race()方法

使用race()方法返回获得结果最快的Promise实例

const p = Promise.race([
fetch('/resource-that-may-take-a-while'),
new Promise(function (resolve, reject) {
setTimeout(() => reject(new Error('request timeout')), 5000)
})
]);
p.then(console.log).catch(console.error);