BCSP-玄子Java开发之Java Web编程CH011_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()方法实现Ajax异步验证注册手机号是否被使用的功能
function checkUserTelExist(imgobj,textobj){
$.get("/microblog/control/register","opr=checkUser&userTel="
+$("#userTel").val(), callBack); //发送请求
//响应成功时的回调函数
function callBack(data) {
// data参数表示响应结果
...//省略部分代码
}
}
使用
$.get()
方法与在$.ajax()
方法中指定参数type的值为GET是等价的
$.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()方法实现Ajax异步验证注册手机号是否被使用的功能
function checkUserTelExist(imgobj,textobj){
$.post("/microblog/control/register","opr=checkUser&userTel="
+$("#userTel").val(), callBack); //发送请求
//响应成功时的回调函数
function callBack(data) {
// data参数表示响应结果
...//省略部分代码
}
}
使用
$.post()
方法与在$.ajax()
方法中指定参数type的值为POST是等价的
$.getJSON()方法
$.getJSON()
方法是$.get()
方法的简写方式,默认指定了参数"dataType"的值为"json"
$.getJSON(url[,data][,success]);
常用参数
参数 | 类型 | 说明 |
---|---|---|
url | String | 必选,发送请求的地址 |
data | PlainObject 或 String | 发送到服务器的数据 |
success | Function(PlainObject result, String textStatus, jqXHR jqxhr) | 请求成功后调用的函数参数result:可选,服务器返回的数据 |
$. getJSON()方法的用法
使用$.getJSON()方法获取列表
function initBlogList(pageIndex){
$.getJSON("../control/blog",
"opr=allBlogList&keyword="+$("#keyword").val()+"&pageIndex="
+ pageIndex, processBlogsList);
}
function processBlogsList(data) {
// data参数表示响应结果
...//省略将JSON数据展示到页面的代码
}
$.getJSON()
方法只能以GET方式发送请求
使用jQuery处理表单数据
修改表单中的提交按钮,不再通过传统提交方式提交表单
<form id="form1" name="form1" method="post" action="">
...//省略表单元素
<input name="button" type="button" class="btn" id="button"
value="保存" onclick="updateAccount()"/>
</form>
使用jQuery提取表单数据并发送Ajax请求
function updateAccount(){
if(checkForm()){
//获取所有表单元素
var $updateUserInputs = $("#container").find(":input");
var paramsArray = $updateUserInputs.serializeArray();
// 检查表单元素有效性转换格式
var queryString = $.param(paramsArray);
// 将数据序列化成请求字符串
$.post("../control/updateUser",
"opr=updateAccount&"+queryString,
function updateSuccess(data){ alert(data.message); },
"JSON");
}}
.serializeArray()
serializeArray()
- 检测一组表单元素中的有效控件
- 没有被禁用
- 必须有name属性
- 选中的checkbox或radio
- 只有触发提交事件的submit按钮才是有效的
- file元素不会被序列化
- 将有效控件序列化为JSON对象数组
- 包含name和value两个属性
{
{
name:"nickname",
value:"安琪虾"
},
{
name:"email",
value:"anqi@126.com"
},
{
name:"sign",
value:"缝缝补补又是一年"
}
}
$.param()
$.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:服务器返回的数据 |
. load()方法的用法
function initUserInfo(){
$("#ul1").load("../control/userInfo");
}
.load()方法默认使用GET方式请求,当data参数是一个对象时,则使用POST请求方式
.load()方法可以通过url参数的特殊语法对加载的HTML内容进行筛选
$("#result").load("article.html #target");
使用jQuery选择器,从.load()方法返回的HTML内容中筛选出id为target的元素,并插入到id为result的元素中
FastJSON简介
一个Java实现的JSON解析器和生成器
- 将Java对象序列化成JSON字符串
- 将JSON字符串反序列化为Java对象
- 性能好
阿里巴巴的开源库
下载地址:https://github.com/alibaba/fastjson/releases
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QWvTwjA5-1687708161068)(./assets/image-20230625224238615.png)]
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字符串,默认不格式化 |
String messageJson = JSONObject.toJSONString(message);
System.out.println(messageJson);
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对象实现的 Ajax 操作
创建Promise对象
const getJSON = function(url) {
const promise = new Promise(function(resolve, reject){
const handler = function() {
if (this.readyState !== 4) { return; }
if (this.status === 200) { resolve(this.response);
} else { reject( new Error(this.statusText)); }
};
const client = new XMLHttpRequest();
client.open("GET", url);
client.onreadystatechange = handler;
client.responseType = "json";
client.setRequestHeader("Accept", "application");
client.send();
});
return promise;
};
调用then()函数
getJSON("/posts.json").then(function(json) {
// 要请求的URL地址
console.log('请求成功');
}, function(error) {
console.error('请求失败');
});
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CSHufEcE-1687708161069)(./assets/image-20230625224720246.png)]
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()方法后面的回调函数文章来源:https://www.toymoban.com/news/detail-501318.html
race()方法
使用race()方法返回获得结果最快的Promise实例文章来源地址https://www.toymoban.com/news/detail-501318.html
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);
- 如果 5 秒之内fetch()方法无法返回结果,变量p的状态就会变为rejected,从而触发catch()方法指定的回调函数
- reject()方法会返回一个状态为rejected的Promise实例
到了这里,关于BCSP-玄子Java开发之Java Web编程CH011_Ajax交互扩展的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!