Loading [MathJax]/jax/input/TeX/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >JavaScript 学习-39.jQuery Ajax请求

JavaScript 学习-39.jQuery Ajax请求

作者头像
上海-悠悠
发布于 2022-06-02 07:40:30
发布于 2022-06-02 07:40:30
1.1K00
代码可运行
举报
运行总次数:0
代码可运行

前言

ajax()方法

语法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$.ajax(url, options)

options常用参数:

  • async: 是否异步,默认true 异步
  • type: 请求方式get/post
  • url: 请求url地址
  • contentType: 请求头部参数
  • data: 发到服务器的数据
  • dataType: 预期服务器返回数据类型
  • success: 请求成功调用此函数
  • error: 请求失败调用此函数
  • beforeSend(XHR):发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。
  • complete(XHR, TS):请求完成后回调函数 (请求成功或失败之后均调用)。
  • cache:默认值: true,dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。
  • global:是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件
  • ifModified:仅在服务器数据改变时获取新数据。默认值: false
  • timeout:设置请求超时时间(毫秒)。此设置将覆盖全局设置。

回调函数:

如果要处理 $.ajax() 得到的数据,则需要使用回调函数:beforeSend、error、dataFilter、success、complete。

  • beforeSend  在发送请求之前调用,并且传入一个 XMLHttpRequest 作为参数。
  • error  在请求出错时调用。传入 XMLHttpRequest 对象,描述错误类型的字符串以及一个异常对象(如果有的话)
  • dataFilter  在请求成功之后调用。传入返回的数据以及 “dataType” 参数的值。并且必须返回新的数据(可能是处理过的)传递给 success 回调函数。
  • success  当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。
  • complete  当请求完成之后调用这个函数,无论成功或失败。传入 XMLHttpRequest 对象,以及一个包含成功或错误代码的字符串。

访问本地数据

在本地同目录新建一个data.txt

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
    "total": 3,
    "rows": [
        {"id": 0, "name": "张三", "tel": "15002222111"},
        {"id": 1, "name": "李四", "tel": "15002222111"},
        {"id": 1, "name": "王五", "tel": "15002222333"},
    ]
}

ajax访问本地数据

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    $.ajax({
        url: 'data.txt',
        type: 'get',
        success: function (result, status, xhr) {
            console.log('请求成功:');
            console.log(result);
        },
        error: function (xhr, status, error) {
            console.log('请求失败:')
            console.log(status)
            console.log(error)
        }
    })

访问本地txt文件,返回的是字符串格式

访问网络接口请求

访问get请求接口示例 接口url地址:  /api/table/ 请求方式: get 接口返回

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
     {
        "total": 3,
        "rows": [
            {"id": 0, "name": "张三", "tel": "15002222111"},
            {"id": 1, "name": "李四", "tel": "15002222111"},
            {"id": 1, "name": "王五", "tel": "15002222333"},
        ]}

get请求示例

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script>
    $.ajax({
        url: '/api/table/',
        type: 'get',
        success: function (result, status, xhr) {
            console.log('请求成功:');
            console.log(result);
        },
        error: function (xhr, status, error) {
            console.log('请求失败')
        }
    })
</script>

运行结果

success 回调函数

ajax 发送请求后,接口返回status状态有五种:”success”, “notmodified”, “error”, “timeout”, or “parsererror” success 是指http协议状态码小于300的请求

  • result   接口返回body内容
  • status  返回状态,这里是”success”
  • xhr    XMLHttpRequest 对象
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   $.ajax({
        url: '/api/table/',
        type: 'get',
        success: function (result, status, xhr) {
            console.log('请求成功:');
            console.log(result);
            console.log(status);
            console.log(xhr);
        },
        error: function () {
            console.log('请求失败')
        }
    })

返回结果

接口返回的是json数据,这里的result参数,已经解析成对象了,可以直接取值

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    $.ajax({
        url: '/api/table/',
        type: 'get',
        success: function (result, status, xhr) {
            console.log('请求成功:');
            console.log(result);
            console.log(status);
            // result 对象取值
            console.log(result.total);
            console.log(result.rows);
            console.log(result.rows[0]);
        },
        error: function () {
            console.log('请求失败')
        }
    })

error 回调函数

接口状态码大于300的都是error

  • xhr XMLHttpRequest 对象
  • status 接口返回状态
  • error 状态码描述内容

示例

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    $.ajax({
        url: '/api/table/',
        type: 'get',
        success: function (result, status, xhr) {
            console.log('请求成功:');
            console.log(result);
        },
        error: function (xhr, status, error) {
            console.log('请求失败:')
            console.log(status)
            console.log(error)
        }
    })

当接口状态码301时:Moved Permanently

当接口状态码404时:Not Found

当接口状态码500时:Internal Server Error

2022年第 11 期《python接口web自动化+测试开发》课程,6月5号开学!

《JMeter 性能测试实战》课程6月15号开学

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-06-02,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 从零开始学自动化测试 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
python测试开发django-130.jQuery中$.ajax()方法发GET/POST/DELETE请求
jQuery中$.ajax()方法可以发 GET/POST/DELETE 请求等 HTTP 的请求方式。 ajax() 方法用于执行 AJAX(异步 HTTP)请求。所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。
上海-悠悠
2021/10/08
7040
jQuery - Ajax详解分析(三)
回调函数 如果要处理 $.ajax() 得到的数据,则需要使用回调函数:beforeSend、error、dataFilter、success、complete。 beforeSend 在发送请求之前调用,并且传入一个 XMLHttpRequest 作为参数。 error 在请求出错时调用。传入 XMLHttpRequest 对象,描述错误类型的字符串以及一个异常对象(如果有的话) dataFilter 在请求成功之后调用。传入返回的数据以及 "dataType" 参数的值。并且必须返回新的数据(可能是处理过的)传递给 success 回调函数。 success 当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。 complete 当请求完成之后调用这个函数,无论成功或失败。传入 XMLHttpRequest 对象,以及一个包含成功或错误代码的字符串。
用户7718188
2021/10/07
4020
jQuery发送AJAX请求
使用jQuery发送AJAX请求需要使用$.ajax()方法。它是jQuery提供的最基本的AJAX方法,可以根据需要配置各种选项。
堕落飞鸟
2023/05/19
1.3K0
读Zepto源码之Ajax模块
Ajax 模块也是经常会用到的模块,Ajax 模块中包含了 jsonp 的现实,和 XMLHttpRequest 的封装。 读 Zepto 源码系列文章已经放到了github上,欢迎star: rea
对角另一面
2017/12/27
3.6K0
ajax未分装前JS代码形式
<script> // 创建XMLHttpRequest对象的实例(就是创建异步对象) var xhr = new XMLHttpRequest(); // 监听请求和响应的状态 xhr.onreadystatechange = function(){ // 表示请求完成 //状态等于4时响应完成,但页面404时仍可接收到响应,所以这里要status(页面状态)==200,既页面正常才给接收响应 if(xhr.readyStat
天天Lotay
2022/12/02
1.1K0
ajax未分装前JS代码形式
jQuery ajax - ajax() 方法jQuery ajax - ajax() 方法
http://www.w3school.com.cn/jquery/ajax_ajax.asp
一个会写诗的程序员
2018/08/17
15.3K0
JavaScript类库---JQuery(二)
   一个基础底层函数:jQuery.ajax();  //高级工具函数都会调用此函数;
JQ实验室
2022/02/09
1.5K0
JavaScript类库---JQuery(二)
详解 Ajax
  Ajax:标准读音 [ˈeɪˌdʒæks] ,中文音译:阿贾克斯。这个术语源自描述从基于 Web 的应用到基于数据的应用。Ajax 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。使用 JavaScript 向服务器提出请求并处理响应而不阻塞用户核心对象 XMLHttpRequest。通过这个对象,JavaScript 可在不重载页面的情况与 Web 服务器交换数据,即在不需要刷新页面的情况下,就可以产生局部刷新的效果。Ajax 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。
Demo_Null
2020/09/28
1.8K0
详解 Ajax
jQuery的ajax详解
jQuery内部也封装了对原生ajax请求的方法,可以很方便我们的对后台异步请求处理。
老马
2018/07/31
2.6K0
JavaScript 框架学习(JQuery)
参考: http://www.w3cschool.cc/jquery/jquery-tutorial.html
lpe234
2020/07/28
8.2K0
ajaxSetup设置Ajax请求的默认值
ajaxSetup() 方法为将来的 AJAX 请求设置默认值。 语法 $.ajaxSetup({name:value, name:value, ... }) 该参数为带有一个或多个名称/值对的 AJAX 请求规定设置。 下面的表格中列出了可能的名称/值: 名称 值/描述 async 布尔值,表示请求是否异步处理。默认是 true。 beforeSend(xhr) 发送请求前运行的函数。 cache 布尔值,表示浏览器是否缓存被请求页面。默认是 true。 complete(xhr,status) 请求完成
用户1055830
2018/01/18
2.3K0
jquery ajax参数详解
type:boolean (默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
别团等shy哥发育
2023/02/25
2.9K0
jQuery ajax() 方法使用详解
嗨,亲爱的读者们!欢迎来到这篇关于使用 jQuery 中的 ajax() 方法进行 Ajax 请求的博客。在前端开发中,jQuery 提供了简便而强大的工具,其中 ajax() 方法为我们处理异步请求提供了便捷的解决方案。无需手动创建 XMLHttpRequest 对象,只需几行代码,就能完成数据的发送和接收。在这篇文章中,我们将深入探讨 ajax() 方法的使用,同时为你呈现丰富的实例。
繁依Fanyi
2023/11/20
9190
Ajax设置请求和接收响应、自己封装简易jQuery.Ajax、回调函数
这篇文章是承接前几篇博客的,是前几篇继续学习 包括Ajax学习与理解和简化版自己实现jQuery等 这篇文章只算是我的个人学习笔记,内容没有精心排版,一些错误请见谅.
代码之风
2018/10/31
2.8K0
Ajax向服务器端发送请求
Ajax 相当于浏览器发送请求与接收响应的代理人,以实现在不影响用户浏览页面的情况下,局部更新页面数据,从而提高用户体验。
小丞同学
2021/08/16
2.5K0
Ajax第二节
请求地址即所谓的接口,通常我们所说的接口化开发,其实是指一个接口对应一个功能, 并且严格约束了请求参数 和响应结果 的格式,这样前后端在开发过程中,可以减少不必要的讨论, 从而并行开发,可以极大的提升开发效率,另外一个好处,当网站进行改版后,服务端接口进行调整时,并不影响到前端的功能。
用户3461357
2019/08/02
3.6K0
初学者必看Ajax的总结
image.png 整理 Ajax 的一些常用的基础知识,挺适合初学的朋友 一、Ajax 简介、优劣势、应用场景以及技术 Ajax 简介 : Asynchronous Javascript And XML (异步的 JavaScript 和 XML) 它并不是一种单一的技术,而是有机利用一系列交互式网页应用相关的技术所形成的结合体 AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更
沈唁
2018/05/24
3K0
AJAX请求超时与网络异常处理
在进行 AJAX(Asynchronous JavaScript and XML)请求时,我们经常需要处理请求超时和网络异常的情况。超时处理可以防止请求时间过长导致用户体验不佳,而网络异常处理可以帮助我们捕获请求失败的情况并进行相应的处理。
堕落飞鸟
2023/05/18
3.7K0
jquery 操作ajax 相关方法
jQuery.get()   使用一个HTTP GET 请求从服务器加载数据。   jQuery.get(url [,data] [,success(data,textStatus,jqXHR)] [dtaType])     url 一个包含发送请求的URL     data 发送给服务器的字符串后键值对     success() 当请求成功时回调的函数     dataType 从服务器返回的预期数据。   用法:   $.get("test.cgi", { n
用户1197315
2018/01/19
3.6K0
详细解读Jquery各Ajax函数:$.get(),$.post(),$.ajax(),$.getJSON()
一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表(是可选的,也可以将要传的参数写在url里面),callback为请求成功后的回调函数,该函数接受两个参数,第一个为服务器返回的数据,第二个参数为服务器的状态,是可选参数。而其中,服务器返回数据的格式其实是字符串形势,并不是我们想要的json数据格式,在此引用只是为了对比说明。 1 $.get("data.php",$("#firstName.val()"),function(data){ 2 3
用户1214487
2018/01/24
4.4K0
相关推荐
python测试开发django-130.jQuery中$.ajax()方法发GET/POST/DELETE请求
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验