欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 科技 > 能源 > Ajax 2024/3/31

Ajax 2024/3/31

2024/11/30 18:41:08 来源:https://blog.csdn.net/yesyesyes_yes/article/details/137053659  浏览:    关键词:Ajax 2024/3/31

Ajax

异步的Javascript和XML

作用:

数据交换:通过Ajax可以给服务器发送请求,并获取服务器响应的数据。

异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术。

原生Ajax

1.准备数据地址

2.创建XMLHttpRequest对象:用于和服务器交换数据

3.向服务器发送请求

4.获取服务器响应数据

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input type="button" value="获取数据" onclick="getData()"><div id="div1"></div></body><script>// 1.创建XMLHttpRequestvar xmlHttpRequest=new XMLHttpRequest();//2.发送异步请求xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');xmlHttpRequest.send();//3.获取服务响应数据xmlHttpRequest.onreadystatechange=function(){if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){document.getElementById('div1').innerHTML=xmlHttpRequest.responseText;}}</script>
</html>

Axios

对原生的Ajax进行了封装,简化书写,快速开发。

Axios入门

1.引入Axios的js文件

2.使用Axios发送请求,并获取响应结果

    axios({method:"get",url:"xxx"}).then((result)=>{console.log(result.data);});
		axios({method:"post",url:"xxx",data:"id=1"}).then((result)=>{console.log(result.data);});

前后端分离开发

api接口文档

帮助实现前后端分离

YApi 接口文档管理平台

1.添加项目

2.添加分类

3.添加接口

 mock服务

为前端生成测试数据

前端工程化

是指在企业级的前端项目开发中,把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。

vue-cli

是Vue官方提供的一个脚手架,用于快速生成一个Vue的项目模板。

功能:

统一的目录结构

本地调试

热部署

单元测试

集成打包上线

依赖环境:NodeJS 

Vue组件库Element

Vue路由

打包部署

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com