文章目录
1.Axios
1.1Ajax简介
Ajax即Asynchronous Javascript And XML(异步JavaScript和XML),使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面,这使得程序能够更快地回应用户的操作。
功能和作用: Ajax主要实现前后端交互.提高用户页面与服务器之间交互效率。
特点: 局部刷新,异步访问
1.2Ajax异步原理
组成部分:
- 用户
- Ajax引擎–代理
- 服务器
异步的特点:
- 由Ajax引擎直接访问后端服务器。
- 在回调函数没有执行之前,用户可以执行自己的任务。
1.3前后端交互
1.3.1GET请求案例
1.get请求
package com.jt.controller;
import com.jt.pojo.User;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
@CrossOrigin //主要解决跨域问题
@RequestMapping("/axios")
public class AxiosController {
/**
* URL地址: http://localhost:8080/axios/getUserById?id=100
* 参数: id = 100
* 返回值: User对象的JSON 伪造一个User对象
*/
@RequestMapping("/getUserById")
public User getUserById(Integer id){
//根据ID查询数据库
User user = new User();
user.setId(id);
user.setName("好好学习");
user.setAge(1000);
user.setSex("男");
return user;
}
}
/**
* var 关键字 没有作用域的概念!!!!
* let 相当于var 有作用域 更加安全.
* const 定义常量的
* 关于axios数据返回值对象的说明:
* axios为了接收后端服务器数据,利用promise对象
* 封装参数
*/
let url1 = "http://localhost:8080/axios/getUserById?id=100"
axios.get(url1)
.then(function(promise){
console.log(promise.data)
})