Ajax开发技术

什么是 Ajax?

  • 概念: Asynchronous JavaScript And XML,异步的 JavaScript 和 XML。
  • 作用:
    • 数据交换: 通过 Ajax 可以给服务器发送请求,并获取服务器响应的数据。
    • 异步交互: 可以在不重新加载整个页面 的情况下,与服务器交换数据并更新部分网页的技术,如: 搜索联想、用户名是否可用的校验等等。

原生Ajax

  1. 准备数据地址
  2. 创建 XMLHttpRequest 对象: 用于和服务器交换数据
  3. 向服务器发送请求
  4. 获取服务器响应数据

Axios

  • 介绍: Axios 对原生的 Ajax 进行了封装,简化书写,快速开发。
  • 官网

1. 引入Axios的js文件

<script src="js/axios-0.18.0.js"></script>

2. 引入Axios的js文件

javascript 复制代码
axios({
	method: "get",
	url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"}).then(result => {
	console.log(result.data);
});

axios({
	method:"post"
	url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteByld",
	data:"id=1"
}).then(result => {
	console.log(result.data);
});

请求方式别名

  • axios.get(url [, config])

  • axios.delete(url [, config])

  • axios.post(url [, data[, config]])

  • axios.put(url [, data[, config]])

发送GET请求

javascript 复制代码
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result) => {
    console.log(result.data);
});

发送POST请求

javascript 复制代码
axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteByld","id=1").then((result) => {
    console.log(result.data);
});
相关推荐
fat house cat_1 分钟前
【redis】线程IO模型
java·redis
Angel_girl31912 分钟前
vue项目使用svg图标
前端·vue.js
難釋懷16 分钟前
vue 项目中常用的 2 个 Ajax 库
前端·vue.js·ajax
Qian Xiaoo18 分钟前
Ajax入门
前端·ajax·okhttp
爱生活的苏苏41 分钟前
vue生成二维码图片+文字说明
前端·vue.js
拉不动的猪44 分钟前
安卓和ios小程序开发中的兼容性问题举例
前端·javascript·面试
炫彩@之星1 小时前
Chrome书签的导出与导入:步骤图
前端·chrome
stein_java1 小时前
springMVC-10验证及国际化
java·spring
贩卖纯净水.1 小时前
浏览器兼容-polyfill-本地服务-优化
开发语言·前端·javascript
weixin_478689761 小时前
C++ 对 C 的兼容性
java·c语言·c++