VUE 开发——AJAX学习(一)

news/2025/1/1 12:02:55/

一、AJAX入门和axios使用

1.AJAX定义:

        异步的javascript和XML,就是使用XMLHttp Request对象与服务器通信,浏览器和服务器进行数据交换的技术。

2.使用axios

  1. 引入axios.js:https://unpkg.com/axios/dist/axios.min.js
  2. 使用axios函数
  3. <body><p class="my-p"></p><!-- 1.引入axios库--><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>//2.使用axios函数axios({url: 'http://hmajax.itheima.net/api/province'}).then(result => {console.log(result)//控制台拿到result的省份对象console.log(result.data.list)//拼接数组元素console.log(result.data.list.join('<br>'))//把准备好的省份列表插入到页面document.querySelector('.my-p').innerHTML = result.data.list.join('<br>')})</script>
    </body>

效果展示:

二、认识URL

1.定义:统一资源定位符,简称网址,用于访问网络上的资源

2.组成:协议、域名、资源路径

    URL:协议://域名/资源路径

http://hmajax.itheima.net/api/province

1. 协议:http

2.域名:hmajax.itheima.net

        域名:标记服务器在互联网中的方位,必须添加

3.资源路径:/api/province

3.URL查询参数:浏览器提供给服务器的额外信息,让服务器返回浏览器想要的数据

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

axios查询参数

使用params选项。携带参数名和值

 axios({url: 'http://hmajax.itheima.net/api/city',//查询参数格式params:{pname:'河南省'}}).then(result => {console.log(result)}
})

三、常用请求方法和数据提交

请求方法:对服务器资源,要执行的操作

请求方法操作
get获取数据
post提交数据
put修改数据(全部)
delete删除数据
patch修改数据(部分)

axios请求配置:

url:请求的url网址

method:请求的方法,get可以省略(不区分大小写)

data:提交数据 

<body><button class="btn">注册用户</button><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>document.querySelector('.btn').addEventListener('click',() => {axios({url: 'http://hmajax.itheima.net/api/register',//指定请求方法method: 'post',//提交数据data: {username: 'user',password: '123'}}).then(result => {console.log(result)})})</script>
</body>

四、axios错误处理

语法:在then方法后面,通过点语法调用catch方法,传入回调函数并定义形参 

axios({url: 'http://hmajax.itheima.net/api/register',//指定请求方法method: 'post',//提交数据data: {username: 'user',password: '123'}}).then(result => {console.log(result)}).catch(error => {//处理错误信息console.log(error)//具体错误原因console.log(error.response.data.message)alert(error.response.data.message)})

五、HTTP协议

1.请求报文:浏览器按照HTTP协议要求的格式,发送给服务器的内容,可以在网络中查看。

 请求报文——错误排查

2.响应报文:规定了浏览器发送以及服务器返回内容的格式

HTTP响应状态码:用来表明请求是否成功完成

404:服务器找不到资源

状态码说明
1XX信息
2XX成功
3XX重定向信息
4XX客户端错误
5XX服务端错误

六、接口文档

接口文档:由后端提供的描述接口的文章

接口:使用AJAX和服务器通讯时,使用的URL,请求方法,以及参数 

七、form-serialize使用

form-serialize插件:快速收集表单元素的值

 document.querySelector('.btn').addEventListener('click',() => {/*参数1:要获取哪个表单的数据参数2:配置对象hash 设置获取数据结构 ——true:JS对象(推荐,一般请求体里提交给服务器) ;                    false:查询字符串empty 设置是否获取空值*/const form = document.querySelector('.example-form')const data = serialize(form,{ hash: true,empty: true})})

 

文章来源:https://blog.csdn.net/weixin_74113429/article/details/142498406
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ppmy.cn/news/1533183.html

相关文章

2024/9/30 英语每日一段

The British Academy has created three high-profile awards to sit alongside the trophies it hands out to adult television shows--going some way, it is hoped, to replace Bafta’s abandoned children’s TV awards event. “Children’s programme-making has been …

小米2025届软件开发工程师(C/C++/Java)(编程题AK)

选择题好像也是25来个 编程题 T1 题目描述 小明喜欢解决各种数学难题。一天&#xff0c;他遇到了一道有趣的题目:他需要帮助他的朋友们完成一个排序任务。小明得到两个长度为 n 的数组a[]和b[]。他可以在两个数组对应位置进行交换&#xff0c;即选定一个位置 i &#xff0c…

【Webpack】Hash 码

概述 在 Webpack 中&#xff0c;Hash 码主要用来缓存控制&#xff0c;确保每次修改文件后生成的文件名是唯一的&#xff0c;从而避免缓存问题。Webpack 在打包过程中&#xff0c;通过对文件内容进行哈希运算来生成 Hash 码&#xff0c;具体方式主要有三种&#xff1a;hash、ch…

[Day 78] 區塊鏈與人工智能的聯動應用:理論、技術與實踐

為了幫助您完成第78天的文章"AI在保險業中的創新應用"&#xff0c;本文將從AI在保險業的主要應用場景開始&#xff0c;並提供多個代碼示例&#xff0c;每個代碼都會有詳細的解釋。文章將涵蓋人工智能技術如何提升保險業務的效率、風險管理、用戶體驗&#xff0c;並引…

Springboot3保存日志到数据库

保存日志到数据库 请求日志几乎是所有大型企业级项目的必要的模块&#xff0c;请求日志对于我们来说后期在项目运行上线一段时间用于排除异常、请求分流处理、限制流量等。请求日志一般都会记录请求参数、请求地址、请求状态&#xff08;Status Code&#xff09;、SessionId、…

代码随想录算法训练营第十四天|递归 226.翻转二叉树 101. 对称二叉树 104.二叉树的最大深度 111.二叉树的最小深度

226.翻转二叉树 翻转一棵二叉树。 思路&#xff1a; 在这里需要注意的是&#xff0c;在递归的时候唯独中序遍历是不可用的&#xff0c;这是因为先对左子树进行了反转&#xff0c;又对自身进行了反转&#xff0c;对自身反转后原本的左子树变成了右子树&#xff0c;如果此时又轮…

Camera Raw:打开图像

在图像工作流程中&#xff0c;无论是 Raw 格式图像文件还是 JPEG、TIFF 文件&#xff0c;都可以先使用 Camera Raw 打开并调整后&#xff0c;再进入其它 Adobe 软件如 Photoshop 中进行进一步的编辑和处理。 一、打开 Raw 格式图像 1、通过 Adobe Bridge 打开 在 Adobe Bridge …

PHP爬虫APP程序:打造智能化数据抓取工具

在信息爆炸的时代&#xff0c;数据的重要性日益凸显。PHP作为一种广泛使用的服务器端脚本语言&#xff0c;因其强大的功能和灵活性&#xff0c;成为开发爬虫程序的理想选择。本文将探讨如何使用PHP构建一个爬虫APP程序&#xff0c;以及其背后的思维逻辑和实现步骤。 什么是PHP爬…