AJAX 异步请求详细教程

文章目录

  • AJAX 异步请求
    • 简介
    • Jquery 版 Ajax
      • $.ajax() -- Jquery提供的 ajax 函数
      • 注册验证用户名是否可用
      • $.get() 与 $.post()
      • Ajax 返回数据类型
    • JSON
      • json 简介
      • JSON 对象
      • JSON 数组
      • 对象数组混合格式
      • 小结
    • JSON 应用
      • JSON 对象的使用
      • JSON 数组的使用
      • 响应的 json 数组
      • 数组对象混合格式
    • Jackson 工具
      • 简介
      • jackson 工具的使用
      • jackson 转换对象


AJAX 异步请求

简介

Ajax 全称为 Asynchronous JavaScript And Xml -- 异步 js 和 xml,用来进行
交互式网页的制作;也是一种动态的网页开发技术,在不加载整个页面的前提下进行页面局部
内容的刷新;
Ajax 在后台与服务器进行少量的数据交互,使用网页实现异步更新,比传统的刷新整个页面
带给服务器的压力要小很多;让程序的运行更加顺畅;
Ajax 分为原生 js 实现和 Jquery 框架实现;
原生的 Ajax 需要定义 XmlHttpRequest 对象,通过该对象的 open 方法和 send 方
法进行请求方式的设置和请求发送,当请求发送到指定 url,被服务器接受并处理,再响应给
页面数据;
Jquery 提供的 ajax 是一个封装好底层实现的函数,只需要进行一些参数设置就能实现
ajax 请求的发送;

Jquery 版 Ajax

$.ajax() – Jquery提供的 ajax 函数

格式:
$.ajax({
url:"请求地址",
data:{},
type:"post/get",
async:true/false,
dataType:"text/json",
success:function(obj){},
error:function(){}
})
url:与 form 表单的 action 属性一致,表示请求发送的地址
data:请求发送时携带的参数,以传统的 key=value 方式进行发送
type:请求发送的方式,对应 form 表单的 method 属性
async:是否支持异步请求发送,true 表示支持异步请求,默认为 true
dataType:服务器响应给页面的数据类型,text、html、json、xml;其中 json 格式
的数据时最好处理的数据类型;
success: 请求响应成功调用的回调函数,如果响应成功,会将响应的数据封装到回调函数的
参数中,在 obj 对象中进行响应数据的获取
error: 请求响应失败后的回调函数,一般不写;
在真正使用 ajax 进行异步请求发送时,不是所有的属性都需要写,除了 url 属性,其他属
性都是可选属性;

注册验证用户名是否可用

register 页面

在这里插入图片描述

servlet 类

在这里插入图片描述

service 层

在这里插入图片描述

dao 层

在这里插入图片描述

$.get() 与 $.post()

$.get() 与 $.post() 是 $.ajax() 的二次封装,分别针对 get 请求和 post 请求
的 ajax;
$.get():只能处理 get 方式请求
$.post():只能处理 post 方式请求
语法:
$get/post(
"请求地址",
{key:value,key:value},
function(){},
"text"
)
注意:$.ajax() 和 $.get() 与 $.post() 实现的功能是一样的,但是$.get() 与
$.post() 在进行属性书写时顺序有严格要求;

在这里插入图片描述

Ajax 返回数据类型

Ajax 支持多种返回值类型,主要有以下几种:
① xml:太复杂、解析起来比较麻烦,已被淘汰
② text/html:表示文本,一般情况下 html 使用 text 代替,因为 html 虽然说是页
面,但是本质和文本一样;
③ script:返回脚本
④ json:json 对象,是一种在页面上操作起来相对简单的数据类型,非常方便页面值获取,
是后续学习中首选的返回数据类型
⑤ jsonp:和 json 几乎一样,只不过 jsonp 支持跨域访问

JSON

json 简介


json 全称为 JavaScript Object Notation – js 对象简谱,是一种轻量级的数据
交换格式;它是基于 ECMAScript,采用独立的编程语言的文本格式进行储存和表示数据。该
语言简介、层次分明、易于浏览器解析换和生成对应的数据;目前是较为理想的数据交换语
言,易于编程人员阅读、编写、操作;
json 格式的数据分为:json对象、json数组、对象数组混合格式
json 在线解析工具:www.bejson.com
① 能够进行 json 数据格式校验
② 能够将不规范的 json 数据就行格式化


在这里插入图片描述

JSON 对象

格式:
{
"key":"value",
"key2":"value2"
}
例如:表示一个有 name 和 age 属性的对象
{"name":"张三","age":"20"}

JSON 数组

与 java 的 Object 类型的一维数组表示方式一致。
格式:
[1,2,3,"apple"]

对象数组混合格式

数组内部嵌套对象,或者对象内部嵌套数组;
格式:
[{
"key":"value",
"key1":["value1","value2","value3"]
},
{
"key":"value",
"key1":["value1","value2","value3"]
},
{
"key":"value",
"key1":["value1","value2","value3"]
}]

小结

① JSON 格式的语法是使用 {} 或者是 [],{} 表示对象,[] 表示数组;
对象中数据的获取方式是通过 key 值获取 value 值
数组中数据的获取使用通过索引进行获取
② 对象中数据的储存是以 key:value 的形式,多个数据之间使用 ',' 隔开
③ 数组中数据的储存是以单个元素进行,多个数据之间使用 ',' 隔开	

JSON 应用

JSON 对象的使用

在这里插入图片描述

jsp 页面

在这里插入图片描述

servlet

在这里插入图片描述

service 层

在这里插入图片描述

在这里插入图片描述

dao 层

在这里插入图片描述

在这里插入图片描述

运行结果

在这里插入图片描述

JSON 数组的使用

servlet 类

在这里插入图片描述

响应的 json 数组

在这里插入图片描述

jsp 页面

在这里插入图片描述

运行结果

在这里插入图片描述

数组对象混合格式

servlet

在这里插入图片描述

servlet 响应的数据

在这里插入图片描述

jsp 页面获取数据

第一种方式 – 有缺陷,需要事先知道数组大小

在这里插入图片描述

第二种方式 – 具有通用性

在这里插入图片描述

运行结果

在这里插入图片描述

Jackson 工具

简介

Jackson 是一个可以将各种类型的数据转换为 json 字符串的工具;
能够对常用对象、数组、集合等类型的数据快速的转换为 json 字符串,能够大幅度的提升开
发效率;
Jackson 工具的使用需要依赖3个 jar 包:
① jackson-core
② jackson-databind
③ jackson-annotations

在这里插入图片描述

jackson 工具的使用

将 jar 包导入项目

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

将新添加的 jackson jar 包加入到服务器中

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

jackson 转换对象

servlet 类

在这里插入图片描述

响应给页面的数据

在这里插入图片描述

jsp 页面进行响应数据的获取

在这里插入图片描述

运行结果
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/253279.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

ajax异步请求及案例

ajax异步请求及案例 1、ajax的介绍 前端页面想和后端页面进行数据交互就可以使用ajax。让 javascript 发送异步的 http 请求,与后台服务器通信进行数据的获取,实现局部刷新。在html页面使用ajax需要在web服务器环境下运行, 一般向自己的web服务器发送a…

AJAX 异步请求数据

AJAX 的全称是Asynchronous JavaScript and XML,其中,Asynchronous 是异步的意思,它有别于传统web开发中采用的同步的方式。 JQuery AJAX 应用详见:jQuery ajax AJAX 使用 JavaScript 在 web 浏览器与 web 服务器之间来发送和接…

异步请求-AJAX

什么是同步交互 首先用户向HTTP服务器提交一个处理请求。接着服务器端接收到请求后,按照预先编写好的程序中的业务逻辑进行处理,比如和数据库服务器进行数据信息交换。最后,服务器对请求进行响应,将结果返回给客户端,返…

Ajax

#Ajax 概念: Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。 1. 异步和同步:客户端和服务器端相互通信的基础上 * 客户端必须等待服务器端的响应。在等待的期…

elementUI中<el-select>下拉框选项过多的页面优化方案——多列选择

效果展示(多列可以配置) 一、icon下拉框的多列选择: 二、常规、通用下拉框的多列选择: 【注】第二种常规、通用下拉框的多列选择,是在第一种的前端代码上删除几行代码就行(把icon显示标签删去),所以下面着重…

python+django高校人事管理系统vue

本高校人事管理系统以Django作为框架,Python语言,B/S模式以及MySql作为后台运行的数据库。本系统主要包括以下功能模块:用户、院长、职称申报、工资信息、绩效信息、奖惩信息、招聘、科系分类等模块。 本文着重阐述了高校人事管理系统的分析、…

chatgpt赋能python:Python中提取纯数字的方法

Python中提取纯数字的方法 在数据清洗和数据分析中,经常需要将文本中的数字提取出来,用于后续的计算或统计分析。Python作为一种流行的数据处理语言,提供了多种方法来完成这个任务。 方法一:使用正则表达式 正则表达式是一种强…

spdk记录

spdk记录 hello_bdev命令行参数 往期文章: spdk环境搭建 hello_bdev 代码路径:examples/bdev/hello_world/hello_bdev.c 可执行文件路径:build/examples/hello_bdev 刚开始直接执行hello_bdev显示找不到Malloc0 ./build/examples/hello_b…

FinChat.io,金融领域的chatgpt

投资股票是一个充满挑战的过程,随着市场的起起伏伏,要抓住每一个机会,同时规避各种风险,这需要投资者具有敏锐的洞察力和快速的决策能力。不过现在有好消息,一款人工智能聊天机器人 FinChat.io 诞生了!它能帮助投资者分析市场,挖掘有潜力的股票,并提供买卖的实时建议 --------…

码农翻身——JDBC的诞生

随着 Oracle, Sybase, SQL Server ,DB2, Mysql 等人陆陆续续住进数据库村, 这里呈现出一片兴旺发达的景象, 无数的程序在村里忙忙碌碌, 读写数据库, 实际上一个村落已经容不下这么多人了, 数据库村变成了数据镇。 这…

码农翻身(随笔)

书一直都有在读,我会一直更新博文,欢迎大家前来阅读、指教! XML和注解 xml:应用于集中配置的场合,比如数据源的配置; 注解:像Controller、RequestMapping、Transactional这样的注解&#xff…

码农翻身摘录

三次握手:验证双方发信和收信能力问题  第一次握手:京城发信,县衙收到了,此时县衙就会明白,京城的发信能力和自己的收信能力没有问题。  第二次握手:县衙发信,京城收到了,此时京城就会明白,京城的发信和收…

《码农翻身》

大话编程 我是一个线程 我是一个Java class Javascript: 一个屌丝的逆袭 Java:一个帝国的诞生 JSP:一个装配工的没落 TCP/IP 之 大明王朝的邮差 TCP/IP 之 大明内阁 TCP/IP 之 蓟辽督师 CPU 阿甘 CPU 阿甘之烦恼 CPU 阿甘:函数调用的秘密 我是一个网卡 …

码农翻身

ISBN:978-7-121-34117-5 作者:刘欣 页数:324 推荐指数:★★★★★ 阅读日期:2020-02-04 用故事的形式来讲述技术, 从这个技术的诞生到如何发展优化, 一步步探究原理, 讲的非常生动形…

读书笔记(一)《码农翻身》

好久都没有写技术博客了,大概有一年左右没有开始写了,原因是自己弄了一个日志博文,当然这不是重点,重点是心态发生了改变,从心里上感觉技术兴趣不大了,后来又发现,并不是对技术失去了兴趣&#…

最担心的还是发生了,程序员失业来得太突然!

周末我在后台收到一条私信,事情很有代表性,这里分享一下。 这位老哥在一家互联网头部公司做了 6 年的技术,最好的年纪都留在了这家公司。上个月底,赶上所在的部门重组。 公司动作很快,开完年中回顾会就裁掉了一批人&am…

《码农翻身》之技术之路

《码农翻身》读书笔记之技术之路 这是我的后端读书笔记系列文章的第四三篇,选取的是最近刚刚圈粉的知名博主刘欣创作的《码农翻身》。这篇文章只是最后一部分内容。 本文内容主要根据知名博主刘欣一作《码农翻身》的内容总结而来,本书的内容风趣幽默&a…

码农翻身 各章节链接

大话编程 我是一个线程 我是一个Java class Javascript: 一个屌丝的逆袭 Java:一个帝国的诞生 JSP:一个装配工的没落 TCP/IP 之 大明王朝的邮差 TCP/IP 之 大明内阁 TCP/IP 之 蓟辽督师 CPU 阿甘 CPU 阿甘之烦恼 CPU 阿甘:函数调用的秘密 我是一个网卡 …

码农翻身全年文章精华

在码农翻身公众号写了一年多, 最大的体会就是:原创真心不易! 每天思考的最大问题就是: 下一篇文章写啥? 在大家的支持和鼓励下,还是坚持了下来, 回头看看走过的路,这一年过得还算…

python笔记16_实例练习_二手车折旧分析p1

python数据分析练习,具体数据不放出。 分析实践很简单。目的不是做完,而是讲清楚每一步的目的和连带的知识点(所以才叫学习笔记) 0.数据准备 原始数据格式:csv文件 原始数据结构: 数据格式 字段名 int…