ajax (一)

devtools/2024/11/25 19:53:03/

什么是 AJAX [ˈeɪdʒæks] ?

概念:AJAX是浏览器与服务器进行 数据通信 的技术,动态数据交互
怎么用AJAX?
1. 先使用 axios [æk‘sio ʊ s] 库, 与服务器进行 数据通信
基于 XMLHttpRequest 封装、代码简单、月下载量在 14 亿次
Vue、React 项目中都会用到 axios
2. 再学习 XMLHttpRequest 对象的使用,了解 AJAX 底层原理

axios 使用

语法:
1. 引入 axios.js: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
2. 使用 axios 函数
传入 配置对象
再用 .then 回调函数接收结果,并做后续处理
javascript">axious({url:'目标资源地址'
}).then(result => {//对服务器返回的数据做后续处理
})
javascript"><body><!-- axios库地址: http://cdn.jsdelivr.net/npm/axios/dist/axios.min.js 省份数据地址:http://hmajax.itheima.net/api/province目标:使用axios库,获取省份表数据,展示到页面--><!-- 1.引用axios库 --><p class="my-p"></p><script src="http://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 2.使用axios函数axios({//去哪个地址url: 'http://hmajax.itheima.net/api/province'}).then(result => {//这里的result 为形参// console.log(result.data.list.join('<br>'))  document.querySelector('.my-p').innerHTML = result.data.list.join('<br>')})</script>
</body>

认识 URL

目标:知道作用和组成,方便与后端人员沟通
概念:URL 就是 统一资源定位符 ,简称 网址 ,用于访问网络上的 资源
组成:协议:// 域名 / 资源路径

协议
http 协议:超文本传输协议,规定浏览器和服务器之间传输数据的 格式

域名
域名:标记服务器在互联网中 方位
资源路径
资源路径:标记资源在服务器下的 具体位置

URL 查询参数

定义:浏览器提供给服务器的额外信息,让服务器返回浏览器想要的数据

语法:http://xxxx.com/xxx/xxx ? 参数名1=值1 & 参数名2=值2

axios-查询参数

语法:使用 axios 提供的 params 选项
注意:axios 在运行时把参数名和值,会拼接到 url ?参数名=值
城市列表: http://hmajax.itheima.net/api/city?pname=河北省
javascript">axios({url:'目标资源地址',params:{参数名:值
}
}).then(result => {//对服务器返回的数据做后续处理
})
javascript">axios({url:'http://hmajax.itheima.net/api/city',params:{pname:'河北省'
}
}).then(result => {//对服务器返回的数据做后续处理
})

总结:

URL 查询参数有什么作用?
浏览器提供给服务器 额外信息 ,获取对应的数据
2. axios 要如何携带查询参数?
使用 params 选项,携带参数名和值

常用请求方法和数据提交

常用请求方法
请求方法:对服务器 资源 ,要执行的 操作
数据提交
场景:当数据需要在服务器上 保存
axios 请求配置
url:请求的 URL 网址
method :请求的方法, GET 可以省略(不区分大小写)
data :提交数据
params:查询参数
javascript">axios({
url: '目标资源地址',
method: '请求方法',
data: {
参数名: 值
}
}).then((result) => {
// 对服务器返回的数据做后续处理
})
数据提交-注册账号
需求:通过 axios 提交用户名和密码,完成注册功能
注册用户 URL 地址: http://hmajax.itheima.net/api/register
请求方法: POST
参数名:
username 用户名(中英文和数字组成,最少 8 位)
password 密码(最少 6 位)
javascript">axios({
url: 'http://hmajax.itheima.net/api/register',
//post 数据提交 搭配 data使用
method: 'post',
//提交数据
data: {
username: 'Lihua999',
password: '7654321'
}
}).then(result => {console.log(result)
})

HTTP协议-报文

接口文档

form-serialize 插件


http://www.ppmy.cn/devtools/136918.html

相关文章

Java语言程序设计 选填题知识点总结

第一章 javac.exe是JDK提供的编译器public static void main (String args[])是Java应用程序主类中正确的main方法Java源文件是由若干个书写形式互相独立的类组成的Java语言的名字是印度尼西亚一个盛产咖啡的岛名Java源文件中可以有一个或多个类Java源文件的扩展名是.java如果…

C0034.在Ubuntu中安装的Qt路径

Qt安装路径查询 在终端输入qmake -v如上中/usr/lib/x86_64-linux-gnu就是Qt的安装目录&#xff1b;

Qt中QPushButton中文字居左显示

​ PushButton 没有直接提供一个 alignment 属性&#xff0c;这与像 QLabel 这样的控件不同&#xff0c;因为 QPushButton 的设计理念更侧重于 交互性&#xff08;点击事件、触发信号等&#xff09;而不是展示文本的排版。虽然 QPushButton 没有 alignment 属性&#xff0c;但…

大数据新视界 -- 大数据大厂之 Impala 性能优化:融合人工智能预测的资源预分配秘籍(上)(29 / 30)

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

Java基于SpringBoot+Vue的藏区特产销售平台

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

C++设计模式之适配器模式与桥接模式,装饰器模式及代理模式相似点与不同点

适配器模式、桥接模式、装饰器模式和代理模式在形式上有一些相似之处&#xff0c;因为它们都涉及到对类的功能或接口的修改、增强或转换。然而&#xff0c;它们在动机和目的上有着显著的不同。以下是对这些模式相似点和不同点的清晰说明&#xff1a; 相似点&#xff1a; 结构…

赛氪媒体支持“2024科普中国青年之星创作交流活动”医学专场落幕

2024年11月15日下午&#xff0c;由中国科普作家协会、科普中国发展服务中心主办&#xff0c;什刹海文化展示中心承办&#xff0c;并携手国内产学研一体融合领域的领军者——赛氪网共同支持的“2024科普中国青年之星创作交流活动”医学科普专场&#xff0c;在什刹海文化展示中心…

【Python】 深入理解Python的单元测试:用unittest和pytest进行测试驱动开发

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门! 单元测试是现代软件开发中的重要组成部分,通过验证代码的功能性、准确性和稳定性,提升代码质量和开发效率。本文章深入介绍Python中两种主流单元测试框架:unittest和pytest,并结合测试驱动开发(TDD)…