jquery ajax实例(jqueryajax接收数据) 收藏 0

jquery ajax 函数用法详解

在前端开发中经常需要用到ajax请求后端接口，做异步请求，今天就来讲讲ajax函数的具体用法。

jQuery的$.ajax()函数是一种强大的工具，用于通过HTTP请求从服务器加载数据，而无需刷新整个页面。以下是对$.ajax()函数用法的详细解释：

1. 基本用法
2. 语法一：jQuery.ajax(settings)
3. 参数settings是一个对象，包含了所有发送请求所需的额外参数设置[^1^]。
4. 语法二：jQuery.ajax(url, settings)
5. 这是语法一的变体，将参数对象settings中的可选属性url单独提取出来作为一个独立的参数[^1^]。
6. 常用参数
7. url（String类型）：请求的URL地址[^1^]。
8. type（String类型）：请求类型，如“GET”或“POST”，默认为“GET”[^5^]。
9. async（Boolean类型）：是否为异步请求，默认为true。如果设置为false，请求将是同步的[^5^]。
10. beforeSend（Function类型）：在发送请求前可修改XMLHttpRequest对象的函数[^5^]。
11. cache（Boolean类型）：指示是否缓存请求，默认为true。设置为false将强制浏览器不缓存当前请求[^5^]。
12. data（任意类型）：发送到服务器的数据，可以是对象、字符串等[^5^]。
13. dataType（String类型）：预期服务器返回的数据类型，如“json”、“xml”、“html”等[^5^]。
14. success（Function类型）：请求成功时执行的回调函数[^5^]。
15. error（Function类型）：请求失败时执行的回调函数[^5^]。
16. complete（Function/Array类型）：请求完成后执行的回调函数，无论成功或失败都会调用[^1^]。
17. 示例代码

总结来说，jQuery的$.ajax()函数提供了一种灵活且强大的方式来进行Ajax请求。通过合理配置其参数，可以实现各种复杂的数据交互需求。然而，需要注意的是，随着技术的发展和Web标准的变化，现代Web开发中更推荐使用Fetch API或其他更现代的技术来处理异步请求。

JSON&Ajax介绍和实例

1. JSON指的是JavaScript对象表示法（ JavaScript Object Notation），JSON的本质仍然是JavaScript对象
2. JSON是轻量级的文本数据交互格式，也是前后端进行数据通讯的一种格式：
3. JSON独立于语言，即java，PHP，asp.net，go等都可以使用json
4. JSON具有自我描述性，更易理解。一句话，JSON很好用。

例子：

k-v形式，然后v中又可以嵌套k-v，并且每对k-v之间用逗号隔开

1. 映射（元素/属性）用冒号:表示，\”名称\”:值，注意名称是字符串，因此要用双引号括起来
2. 并列的数据之间用逗号,分隔，如\”名称1\”:值,\”名称2\”:值
3. 映射的集合（对象）用大括号{}表示，如{\”名称1\”:值,\”名称2\”:值}
4. 并列数据的集合（数组）用方括号[]表示，如[{\”名称1\”:值,\”名称2\”:值},{\”名称1\”:值,\”名称2\”:值}]
5. 元素值类型：string，number，object，array，true，false，null

打开浏览器控制台，输出如下：

1. JSON.stringify(json)：将一个json对象转换成为json字符串
2. JSON.parse(jsonString)：将一个json字符串转换成为json对象
3. 转换前提是传入的字符串的格式必须满足json格式

打开浏览器控制台，输出如下：

1. JSON.stringify(json对象)会返回对应的string，并不会影响原来json对象
2. JSON.parse(jsonString)方法会返回对应的json对象，并不会影响原来的string
3. 在定义Json对象时，可以使用单引号\’\’或者双引号\”\”表示字符串，甚至前面的key可以不用任何引号
4. 比如var json_person={\”name\”:\”jack\”,\”age\”:100};
5. 也可以写成var json_person={\’name\’:\’jack\’,\’age\’:100};
6. 或者是var json_person={name:\”jack\”,age:100};
7. 但是在把原生字符串转成json对象时，必须使用双引号\”\”，否则会报错
8. JSON.springfiy(json对象)方法返回的字符串都是双引号\”\”表示的字符串，所以在语法格式正确的情况下，是可以重新转成json对象的。

例子

打开浏览器控制台，输出如下：

前面讲述的是前端页面中json对象和字符串之间的转化。在实际开发中，前端将json格式的字符串发送给后端，后端拿到后，可以将其转成java对象，进行其他操作，并可以在业务操作后，重新向前端发送json格式的字符串。

这意味着在Java后端中，同样有对象和字符串对象转换的需求。

1. Java中使用json，需要引入第三方的包 gson.jar
2. Gson是Google提供的用来在Java对象和 JSON数据之间进行映射的Java类库
3. 可以对JSON字符串和Java对象相互转换

1. Javabean对象和json字符串的相互转换
2. List对象和json字符串的相互转换
3. Map对象和json字符串的相互转换

在项目中的lib目录下将gson.jar文件复制过来，点击add as library作为库

Javabean：Book类

JavaJson：

Book类见4.3

JavaJson：

TypeToken类的作用是：得到类型的完整路径，然后进行底层的反射

一个问题，TypeToken为什么要加{}?

1. 如果我们把下面语句中的 {} 去掉，会提示\’TypeToken()\’ has protected access in \’com.google.gson.reflect.TypeToken\’
2. 因为TypeToken的无参构造器是protected的，而语句TypeToken<List<Book>>()就是调用其无参构造器。我们知道，如果一个方法是protected，并且和当前类不在同一个包，那么就没有该方法的访问权限，因此报错。

1. 那为什么加上{} ,就可以访问了呢？这里涉及到匿名内部类的知识。
2. 当我们这样使用的时候：new TypeToken<List<Book>>(){} ，其实这个类型就不是TypeToken，而是一个匿名内部类（可以理解为TypeToken的一个子类）
3. 而且这个匿名内部类有自己的无参构造器(隐式)，根据java基础，当执行子类的无参构造器时，默认调用super(); 到父类的无参构造器执行

我们在Type type = new TypeToken<List<Book>>() {}.getType();处打上断点，并在TypeToken类中的无参构造器旁也打上断点。点击debug，点击Resume Program按钮

可以看到光标跳转到TypeToken类中的无参构造器：

再点击step over，可以看到，type属性拿到了类型的完整路径，这样才能去进行底层的反射

我们用两个类来模拟一下上述4.4.1的过程

在src目录下创建两个包：t1和t2，在t1中创建一个A类，在t2中创建一个Test类

A类：

这时如果在Test类中new一个A类对象，那么将会报错，原因就是被 protected 修饰的成员对于本包和其子类可见。而A和Test类既不在同一个包，也不是继承关系。这和4.4.1报错的原因完全一致。

实际上，protected的可见性在于两点：1.基类的 protected 成员是包内可见的，并且对子类可见；2.若子类与基类不在同一包中，那么在子类中，子类实例可以访问其从基类继承而来的protected方法，而不能访问基类实例的protected方法。

Java protected 关键字详解 | 菜鸟教程 (runoob.com)

Book类见4.3

JavaJson：

1. AJAX 即“Asynchronous JavaScript And XML”（异步JavaScript和XML）
2. Ajax 是一种浏览器异步发起请求（指定发哪些数据），局部更新页面的技术
3. 传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。而使用Ajax，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
4. 传统的网页（不使用 AJAX），如果没有得到服务器的响应，浏览器程序会处于一个等待挂起的状态，无法执行其他操作，直至得到http响应。

1. 搜索引擎根据用户输入关键字，自动提示检索关键字
2. 动态加载数据，按需取得数据 [树形菜单，联动菜单]
3. 改善用户体验 [输入内容前提示，带进度条文件上传]
4. 电子商务应用 [购物车，邮件订阅]
5. 访问第三方服务 [访问搜索服务，rss阅读器]
6. 页面局部刷新

• Ajax的三个特点异步请求发送指定数据局部刷新

传统web应用数据通信方式

1. 浏览器发出http请求（携带数据username=xxx&pwd=xxx）
2. 服务端接收数据，并处理
3. 通过http响应，把数据返回给浏览器

缺点：

1. 表单提交是把该表单的所有数据都提交给服务端，数据量大，没有意义
2. 在服务端没有响应前，浏览器前端页面处于等待状态，处于一个挂起的状态
3. 不能进行局部刷新页面，而是刷新整个页面

Ajax数据通信方式：

1. 浏览器发出http请求，使用XMLHttpRequest对象
2. 服务端接收数据，并处理
3. 通过http响应，把数据返回给浏览器（返回的数据格式可以多样 如json，xml，普通文本）

优点：

1. 可以通过XMLHttpReques对象，发送指定数据，数据量小，速度快
2. XMLHttpReques是异步发送，在服务端没有Http响应前，浏览器不需要等待，用户可以进行其他操作
3. 可以进行局部刷新，提高了用户体验

AJAX – XMLHttpRequest 对象 (w3school.com.cn)

• onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

演示JavaScript发送原生Ajax请求的案例

1. 在输入框输入用户名
2. 点击验证用户名，使用ajax方式，服务端验证该用户名是否已经被占用，如果已经被占用，以json格式返回该用户信息
3. 假定用户名为king，就不可用，其他用户名可以（后面我们接入DB）
4. 对页面进行局部刷新，显示返回信息
5. 思考：为什么直接返回用户名是否可用信息？==>为什么返回json格式的字符串？
6. 可以根据返回的json可以做更多的业务操作。

思路

1. 首先创建一个新项目，添加web支持(暂时不使用maven)
2. 在web-inf文件夹下添加lib目录，添加servlet和json的相关jar包
3. 配置Tomcat服务器
4. 创建login.html，使用ajax
5. 大致的流程是：用户点击验证用户名按钮后，操作dom获取填写的用户名，然后创建XMLHttpRequest对象[ajax引擎对象]，调用XMLHttpRequest 对象的 open() 和 send() 方法
6. 在open中设置三个参数：1.请求方式、2.请求url（如果是get请求，url需包括请求参数）、3.是否使用异步发送
7. 给XMLHttpRequest对象绑定一个事件onreadystatechange，该事件的触发时机是XMLHttpRequest的readyState状态改变。
8. readyState状态详见：AJAX – 服务器响应 (w3school.com.cn)
9. 然后调用send方法真正发送ajax请求（如果是post请求，参数就是在send方法中设置）
10. 根据readyState的状态判断请求已完成且响应已就绪，然后进行业务操作。

1. 在web.xml中配置servlet

1. CheckUserServlet：如果接收到的用户名为king，就将其信息以json形式返回前端页面，如果是其他名字，就返回空串。

1. Javabean，为了完成对象–>json字符串的需求

需求分析：到数据库中验证用户名是否可用

1. 点击验证用户名，到数据库中验证用户名是否可用
2. 自己设计创建数据库ajaxdb，创建users表
3. 使用ajax方式，服务端验证该用户名是否已经被占用了，若已经被占用，以json格式返回该用户信息
4. 对页面进行局部刷新，显示返回信息
5. 提示：[Mysql+JDBC+数据库连接池]

只需在前面的应用实例中进行升级改进，接入DB

项目的整体架构：

在项目的lib库下添加德鲁伊，Apache-DBUtils，mysql-connect数据库连接驱动

数据库连接池详见：javase基础-jdbc和数据库连接池

在项目src目录下添加德鲁伊配置文件

创建德鲁伊工具类JDBCUtilsByDruid

修改3.2中的Javabean–User类

详见3.2应用实例

重启Tomcat，在浏览器中访问http://localhost:8080/ajax/login.html

原生Ajax请求问题分析：

1. 编写原生的Ajax要写很多的代码，还要考虑浏览器兼容问题，使用不方便
2. 在实际工作中，一般使用JavaScript的框架（比如jquery）发动Ajax请求，从而解决这个问题。

在线文档：jQuery 参考手册 – Ajax (w3school.com.cn)

完整的参数查看手册：jQuery ajax – ajax() 方法

$.ajax 常用参数：

• url：请求的地址
• type：请求的方式get或者post， 默认为 \”GET\”。
• 注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
• data：发送到服务器的数据，将自动转换为请求字符串格式
• success：请求成功后的回调函数
• 参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。
• 这是一个 Ajax 事件。
• error：默认值: 自动判断 (xml 或 html)，请求失败时的回调函数。
• dataType：指定返回的数据类型，常用json或text

jQuery AJAX get() 和 post() 方法

$.get()请求和$.post()请求常用参数：

• url：请求的url地址
• data：请求发送到服务器的数据
• success：成功时的回调函数
• type：返回内容的格式，xml，html，script，json，text

说明：$.get()和 $.post()底层还是使用$.ajax()方法来实现异步请求

get() 方法通过远程 HTTP GET 请求载入信息

这是一个简单的 GET 请求功能以取代复杂 $.ajax，请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax().

语法：

post() 方法通过 HTTP POST 请求从服务器载入数据。

语法：

jQuery ajax – getJSON() 方法

$.getJSON()常用参数

• url：请求发送哪个url
• data：请求发送到服务器的数据
• success：请求成功时运行的函数

说明：$.getJSON()底层使用$.ajax()方法来实现异步请求

$.getJSON()方法通过 HTTP GET 请求载入 JSON 数据，语法：

演示jquery发送ajax的案例

1. 在输入框输入用户名
2. 点击验证用户名，服务端验证该用户是否已经占用了，如果是，则以json格式返回该用户信息
3. 假定king为已使用的用户名
4. 对页面进行局部刷新，显示返回的信息

思路分析：直接参考3.2的思路图即可

引入jquery库：

注意：如果有的资源是拷贝进来的，有时候运行目录out没有及时更新，这时可以点击Rebuild Project，如果不行就redeploy Tomcat

配置servlet：

创建CheckUserServlet2：

login2.html：

使用4.5的应用实例，将上面的html页面改写，其他不变。

使用4.5的应用实例，将上面的html页面改写，其他不变。

使用4.5的应用实例，将上面的html页面改写，其他不变。

● 需求分析: 到数据库去验证用户名是否可用

1. 点击验证用户名, 到数据库中验证用户名是否可用
2. 创建数据库 ajaxdb , 创建表 user 表 自己设计
3. 使用 Jquery + ajax 方式， 服务端验证该用户名是否已经占用了, 如果该用户已经占用，以 json 格式返回该用户信息
4. 对页面进行局部刷新, 显示返回信息

提示: 根据day34-JSON&Ajax02-3.3练习 的 ajax 请求+jdbc+mysql 到数据库验证案例完成

根据之前的day34-JSON&Ajax02-3.3练习，我们已经写了JDBCUtilsByDruid，BaseDAO，UserDAO，UserService，User等类，只需要在CheckUserServlet2中修改一下代码即可完成：

前端html页面使用4.5.4的$.getJSON()方法发送ajax请求，在4.5.4代码的基础上修改返回数据的判断条件即可

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com