jquery ajax传递参数(ajax传参方式) 收藏 0

jQuery基础回顾——jQuery与Ajax应用

Ajax全称为“Asynchronous JavaScript XML”(异步javaScript和XML)，它并不是指一种单一的技术，而是有机地利用了一系列交互式网页应用相关的技术所形成的结合体。

• 不需要插件的支持

Ajax不需要任何浏览器插件，就可以被绝大多数主流浏览器所支持，用户只需要允许javaScript在浏览器上执行即可。

• 优秀的用户体验

这是Ajax技术的最大优点，能在不刷新整个页面的前提下更新数据，这使得Web应用程序能更为迅速地回应用户的操作。

• 提高Web程序的性能

与传统模式相比，Ajax模式在性能上的最大区别就在于传输数据的方式，在传统模式中，数据提交时通过表单(Form)来实现的，而数据获取是靠全页面刷新来重新获取整页的内容，Ajax模式只是通过XMLHttpRequest对象向服务器提交希望提交的数据，即按需发送。

• 减轻服务器和宽带的负担

Ajax的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化，它在客户端创建Ajax引擎，把传统方式下的一些服务器负担的工作转移到客户端，便于客户端资源来处理，减轻服务器和宽带的负担。

Ajax的核心是XMLHttpRequest对象，它是Ajax实现的关键——发送异步请求、接收响应及执行回调都是通过它来完成的。XMLHttpRequest对象最早是在Microsoft Internet Explorer 5.0 ActiveX组件中被引入的，之后各大浏览器厂商都以javaScript内置对象的方式来实现XMLHttpRequest对象，虽然大家对它的实现方式有所区别，但是绝大多数浏览器都提供了类似的属性和方法，而且在实际脚本编写方法上的区别也不大，实现的到的效果也基本相同。

jQuery对Ajax操作进行了封装，在jQuery中$.ajax()方法属于最底层的方法，第2层是load()、$.get()和$.post()方法，第3层是$.getScript()和$.getJSON()方法。

1、load()方法

• 远程载入HTML文件

load()方法是jQuery中最为简单和常用的Ajax方法，能载入远程HTML代码并插入到DOM中，它的结构为：

url:待装入 HTML 网页网址。

data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。

callback:载入成功时回调函数。

等DOM元素加载完毕后，通过单击id为“send”的按钮来调用load()方法，然后将test.html的内容加载到id为“resText”的元素里。

显然，load()方法完成了原本很繁琐的工作，开发人员只需要使用jQuery选择器为HTML片段指定目标位置，然后将要要加载的文件的URL作为参数传递给load()方法即可，当单击按钮后，test.html页面的HTML内容就会被加载并插入对应元素中。

• 筛选载入的HTML文件

上个例子是将test.html页面中的内容都加载到id为“resText”的元素里，如果只需要加载test.html页面内的某些元素，那么可以使用load()方法的URL参数来达到目的，通过为URL参数指定选择符，就可以很方便地从加载过来的HTML文档里筛选出所需要的内容。

load()方法的URL参数的语法结构为“url selector”,注意，URL和选择器之间有一个空格，例如只需要加载test.html页面中class为“para”的内容，可以使用如下代码来完成：

• 传递方式

load()方法的传递方式根据参数data来自动指定，如果没有参数传递，则采用GET方式，反之，则会自动转换为POST方式。

• 回调参数

对于必须在加载完成后才能继续的操作，load()方法提供了回调函数（callback），该函数有3个参数，分别代表请求返回的内容、请求状态和XMLHttpRequest对象，jQuery代码如下：

2、$.get()方法和$.post()方法

load()方法通常用来从Web服务器上获取静态的数据文件，然而这并不能体现Ajax的全部价值，在项目中，如果需要传递一些参数给服务器中的页面，那么可以使用$.get()或者$.post()方法（或$.ajax()方法）。

• $.get()

url:待载入页面的URL地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default。

示例代码如下：

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

• $.post()

它与$.get()方法的结构和使用方式都相同，不过它们之间仍然有以下区别。

1. GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器，当然，在Ajax请求中，这种区别对用户是不可见的。
2. GET方式对传输的数据有大小限制（通常不能大于2KB），而是用POST方式传递的数据量要比GET方式大得多（理论上不会受限制）。
3. GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等，在某种情况下，GET方式会带来严重的安全性问题，而POST方式相对来说就可以避免这些问题。
4. GET方式和POST方式传递的数据在服务器端的获取也不相同，在jsp中，GET方式的数据可以用Request.QueryString获取，而POST方式可以用Request.Form获取。

上面使用load()、$.get()和$.post()方法完成了一些常规的Ajax程序，如果还需要编写一些复杂的Ajax程序，那么就要用到jQuery中的$.ajax()方法，$.ajax()方法不仅能实现与load()、$.get()和$.post()方法同样的功能，而且还可以设beforeSend(提交前回调函数)、error(请求失败后处理)、success(请求成功后处理)以及complete(请求完成后处理)回调函数，通过这些回调函数，可以给用户更多的Ajax提示信息，另外，还有一些参数，可以设置Ajax请求的超时时间状态等。

3、$.ajax()方法

$.ajax()方法是jQuery最底层的Ajax实现，它的结构为：

url:一个用来包含发送请求的URL字符串。

settings:AJAX 请求设置。所有选项都是可选的。

settings选项1

settings选项2

若感觉对您有用，可以关注并转发，您的关注是对我莫大的支持！

上一节：

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代码的基础上修改返回数据的判断条件即可

JavaScript学习 — ajax方法的POST请求

在Web开发中，通过POST请求将数据发送给服务器是一种常见的方式。使用jQuery可以轻松地发送POST请求，这需要使用jQuery的ajax()方法。本文将介绍jQuery如何使用POST请求发送数据，并提供一个实际的例子。

使用jQuery的ajax()方法发送POST请求需要设置以下属性：

• url：要发送请求的URL
• type：请求类型，这里应设置为POST
• dataType：预期响应数据类型，可以是JSON、XML或HTML等
• data：要发送的数据，可以是一个JavaScript对象或字符串

以下是一个示例代码：

在上面的示例中，我们向URL为https://example.com/api的API发送一个POST请求，并携带一个JavaScript对象作为数据发送。

当API响应成功时，success()回调函数将被执行，并将响应数据作为参数传递。当API响应失败时，error()回调函数被执行，并将HTTP错误信息作为参数传递。

除了使用ajax()方法外，还可以使用jQuery的$.post()方法来发送POST请求，如下所示：

使用$.post()方法时，第一个参数是请求URL，第二个参数是要发送的数据，第三个参数是成功响应后的回调函数，最后一个参数是响应数据类型。

在发送POST请求时，有时需要在请求头中添加一些信息，例如身份验证令牌或版本信息。可以使用以下代码在请求中添加标头信息：

在上面的示例中，我们将headers属性添加到请求中，并在其中添加了Authorization和X-API-Version标头。

在contentType中传递的“application/json”指示我们发送的数据是JSON格式。data属性使用JSON.stringify()方法将数据转换为JSON字符串。

本文介绍了如何使用jQuery发送POST请求，并提供了简单和带标头信息的请求的实际示例。使用jQuery可以方便地向服务器发送数据，并等待响应。在实际开发中，我们通常会使用POST请求来提交表单数据、发送文件或与服务器进行交互。

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