jquery ajax请求实例(jquery ajax提交json数据) 收藏 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或其他更现代的技术来处理异步请求。

Java学科：ajax的常用参数介绍

1）url:

　　要求为String类型的参数，（默认为当前页地址）发送请求的地址。

2）type:

　　要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。

3）timeout:

　　要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。

4）async:

　　要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。

注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。

5）cache:

　　要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。

6）data:

　　要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看　　processData（防止自动转换）选项。对象必须为key/value格式，例如{foo1:\”bar1\”,foo2:\”bar2\”}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:[\”bar1\”,\”bar2\”]}转换为&foo=bar1&foo=bar2。

7）dataType:

　　要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：

　　● xml：返回XML文档，可用JQuery处理。

　　● html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。

　　● script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。

　　● json：返回JSON数据。

　　● jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。

　　● text：返回纯文本字符串。

8）beforeSend：

　　这个参数主要是为了在向服务器发送请求前，执行一些操作。要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。

9）complete：

　　要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。

10）success：

　　要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。

（1）由服务器返回，并根据dataType参数进行处理后的数据。

（2）描述状态的字符串。

11）error:

要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：

12）contentType：

要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为\”application/x-www-form-urlencoded\”。该默认值适合大多数应用场合。

13）dataFilter：

要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。

14）dataFilter：

要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。

15）global：

要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。

16）ifModified：

要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。

17）jsonp：

要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在\”callback=?\”这种GET或POST请求中URL参数里的\”callback\”部分，例如{jsonp:\’onJsonPLoad\’}会导致将\”onJsonPLoad=?\”传给服务器。

18）username：

要求为String类型的参数，用于响应HTTP访问认证请求的用户名。

19）password：

要求为String类型的参数，用于响应HTTP访问认证请求的密码。

20）processData：

要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型\”application/x-www-form-urlencoded\”。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。

21）scriptCharset：

要求为String类型的参数，只有当请求时dataType为\”jsonp\”或者\”script\”，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。

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