Ajax 操作
2022/8/5 23:22:45
本文主要是介绍Ajax 操作,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
了解 Ajax
什么是Ajax
Ajax 的全称是 Asynchronous Javascript And XML(异步JavaScript和XML)。
通俗的理解:在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式,就是Ajax。
为什么学习 Ajax
之前所学的技术,只能把网页做的更美观漂亮,或添加一些动画效果,但是,Ajax 能让我们轻松实现网页与服务器之间的数据交互。
Ajax 典型应用场景
- 用户名检测:注册用户时,通过 Ajax 的形式,动态检测用户名是否被占用。
- 搜索提示:当输入搜索关键字时,通过 Ajax 的形式,动态加载搜索提示列表。
- 数据分页显示:当点击页码值的时候,通过 Ajax 的形式,根据页码值动态刷新表格的数据。
- 数据的增删改查:数据的添加、删除、修改、查询操作,都需要通过 Ajax 的形式,来实现数据的交互。
Ajax 的优点
Ajax 允许我们在不刷新整个网页的前提下,更新部分网页内容(局部加载)。
JS 原生 Ajax
get 请求
// 1. 创建请求对象 let xhr = new XMLHttpRequest(); // 2. 设置请求方法和请求的url接口地址 xhr.open('get', 'https://autumnfish.cn/api/joke/list?num=2', true); // 3. 监听响应事件,当得到响应式执行 xhr.onreadystatechange = function () { if (xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)) { console.log(xhr.responseText); } }; // 4. 发送请求,只有执行这步时才会发送上面设置的请求 xhr.send()
post 请求
// 1. 创建请求对象 let xhr = new XMLHttpRequest(); // 2. 设置请求方法和请求的url接口地址 xhr.open("post", "http://www.liulongbin.top:3006/api/addbook"); // 3. 设置请求头(在复杂参数时必须使用) xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded", true) // 4. 监听响应事件,当得到响应式执行 xhr.onreadystatechange = function () { if (xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)) { console.log(xhr.responseText); } }; // 5. 发送请求并携带post参数,只有执行这步时才会发送上面设置的请求 xhr.send("bookname=test&author=brokyz&publisher=test");
JQuery 中的 Ajax
简介
浏览器中提供的 XMLHttpRequest 用法比较复杂,所以 jQuery 对 XMLHttpRequest 进行了封装,提供了一系列 Ajax 相关的函数,极大地降低了Ajax的使用难度。
jQuery 中发起 Ajax 请求最常用的三个方法如下:
$.get()
$.post()
$.ajax()
$.get()
jQuery 中$.get()
函数的功能单一,专门用来发起 get 请求,从而将服务器上的资源请求到客户端来进行使用。
$.get()
函数的语法如下:
$.get(url, [data], [callback])
参数名 | 参数类型 | 是否必选 | 说明 |
---|---|---|---|
url | string | 是 | 要请求的资源地址 |
data | object | 否 | 请求资源期间要携带的参数 |
callback | function | 否 | 请求成功执行的回调函数 |
demo:
$(function () { $("button").on("click", function () { $.get("https://autumnfish.cn/api/joke/list", { num: 10 }, function (res) { console.log(res); }); }); });
$.post()
jQuery 中$.post()
函数的功能弹一,专门用来发起 post 请求,从而向服务器提交数据。
$.post()
函数的语法如下:
$.post(url, [data], [callback])
参数名 | 参数类型 | 是否必选 | 说明 |
---|---|---|---|
url | string | 是 | 要提交数据的地址 |
data | object | 否 | 要提交的数据 |
callback | function | 否 | 请求成功执行的回调函数 |
demo:
$(function () { $("button").on("click", function () { $.post("https://mock.apifox.cn/m1/1301638-0-default/pet", { name: 'brokyz', status: 'sold' }, function (res) { console.log(res); }); }); });
$.ajax()
使用$.ajax()
发起 GET 请求:
$(function () { $.ajax({ type: 'GET', url: 'https://autumnfish.cn/api/joke/list', data: {num: 10}, success: function(res) { console.log(res); } }) });
使用$.ajax()
发起 POST 请求:
$(function () { $.ajax({ type: 'POST', url: 'https://mock.apifox.cn/m1/1301638-0-default/pet', data: { name: 'brokyz', status: 'sold' }, success: function(res) { console.log(res); } }) });
form 表单与 Ajax
简介
表单在网页中主要负责数据采集功能。HTML中的
这篇关于Ajax 操作的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?