jquery ajax error 收藏 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或其他更现代的技术来处理异步请求。

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

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

上一节：

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