BCSP-玄子Java开发之Java Web编程CH011_Ajax交互扩展

这篇具有很好参考价值的文章主要介绍了BCSP-玄子Java开发之Java Web编程CH011_Ajax交互扩展。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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()方法后面的回调函数

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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 玄子Share-自然语言编程(NLP)_Java开发小白向 ChatGPT 提问的最佳模板

    以下内容均为 ChatGPT 回答 玄子: 我向你提问时,问题描述精确的重要性 ChatGPT 3.5 问题描述的精确性非常重要,因为它可以让回答者更好地理解您的问题,并且更容易提供准确和有用的解决方案。如果问题描述不够清晰或不够详细,回答者可能会误解您的问题或者理解不到位

    2023年04月09日
    浏览(50)
  • [前端系列第6弹]Ajax简明教程:轻松实现Web页面的异步交互

    在这篇文章中,我将介绍Ajax的基本概念、原理、优缺点、实现方法和应用场景,以及如何使用它来实现Web页面的异步交互。还将给一些简单而实用的例子,让你可以跟着我一步一步地编写自己的Ajax代码。 目录 一、什么是Ajax 二、如何使用Ajax (一)JavaScript中使用Ajax (二)

    2024年02月13日
    浏览(45)
  • java生态环境评价Myeclipse开发mysql数据库web结构java编程计算机网页项目

    一、源码特点     java 生态环境评价管理系统是一套完善的java web信息管理系统,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。开发环境为 TOMCAT7.0,Myeclipse8.5开发,数据库为Mysql5.0,使用java语言开发。 java web 生态环境评价系

    2024年02月19日
    浏览(43)
  • java排课管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

    一、源码特点     java排课管理系统是一套完善的java web信息管理系统,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开发,数据库为Mysql5.0,使用java语言开发。 java web 排课管理系统1 下载地址

    2024年02月19日
    浏览(54)
  • java流浪动物保护系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

    一、源码特点     java Web 流浪动物保护系统是一套完善的java web信息管理系统,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开发,数据库为Mysql5.0,使用java语言开发。 二、功能介绍 前台功能:

    2024年02月04日
    浏览(42)
  • 【Java Web】使用ajax在论坛中发布帖子

    AJAX 异步的JavaScript与XML,不是一门新技术,只是一个新术语; 使用AJAX,网页能增量更新在页面上,不需要刷新整个页面; JSON的使用比XML使用更加普遍; 示例 使用jQuery发送AJAX请求; 实践 采用AJAX请求,实现发布帖子功能。 1. DiscussPost类 2. mapper 3. Service 4. Controller 5. 前端jq

    2024年02月10日
    浏览(40)
  • Qt+QtWebApp开发笔记(五):http服务器html中使用json触发ajax与后台交互实现数据更新传递

      前面完成了页面的跳转、登录,很多时候不刷新页面就想刷新局部数据,此时ajax就是此种技术,且是异步的。   本篇实现网页内部使用js调用ajax实现异步交互数据。   在js中使用 ajax是通过XMLHttpRequest来实现的。        链接:https://pan.baidu.com/s/1tJMTPhIIyVE40qWxRW

    2024年02月08日
    浏览(112)
  • java 体育明星管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

    一、源码特点     java Web 体育明星管理系统是一套完善的java web信息管理系统,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。开发环境为 TOMCAT7.0,Myeclipse8.5开发,数据库为Mysql5.0,使用java语言开发。 java Web体育明星管理系统

    2024年02月02日
    浏览(53)
  • java碳排放数据信息管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

    一、源码特点     java Web碳排放数据信息管理系统是一套完善的java web信息管理系统,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。开发环 境为TOMCAT7.0,Myeclipse8.5开发,数据库为Mysql5.0,使用java语言开发。 java Web碳排放数据信

    2024年01月22日
    浏览(54)
  • java springboot VUE粮食经销系统开发mysql数据库web结构java编程计算机网页源码maven项目

    一、源码特点   springboot VUE 粮食经销系统是一套完善的完整信息管理类型系统,结合springboot框架和VUE完成本系统,对理解JSP java编程开发语言有帮助系统采用springboot框架(MVC模式开发) ,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。 springboot vue 粮食经销系统

    2024年02月05日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包