需求：使用axios或者Ajax获取接口，有些需要获取到输入框，或者选择器内容之后传给接口，也就是写了几种不同请求的方法，网上有很多方法，本文章算是个归纳吧。
一、axios请求+传参+请求头
1.github下载axios
我框住的这俩下谁都行，我下的是第一个
Releases · axios/axios (github.com)
下载后解压打开找到dist文件
这个就是axios文件了
2.页面加载完成后就请求接口
第一种：axios.get,axios.post,axios.delete都行，第一个参数是后台请求地址，第二个是传参
function getInfo() {axios.get("http://120.0.0.1:8000/userinfo",{params:{//传入的参数user:'xxx',pass:"ddd"
}
}).then(res => {let { data } = res;if (data.code == 200) {}}).catch((error) => {console.log(error);})
}
window.onload = function () {getInfo();
}第二种请求方式：以拼接的方式传入后端所需要的值，值用es6的语法实现动态添加
function getInfo() {axios.get("http://127.0.0.0:8000/login"+ `account=${account}&password=${password}`}).then(res => {let { data } = res;if (data.code == 200) {}}).catch((error) => {console.log(error);})
}
window.onload = function () {getInfo();
}3.请求头携带参数
只需要在所需的页面使用axios自带的请求拦截即可
function getInfo() { // 添加请求拦截器 axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么 console.log(typeof localStorage.getItem('token'));const token = localStorage.getItem('token'); // 从localStorage获取token if (token) {config.headers.Authorization = token; // 在请求头中添加token }return config;}, function (error) {// 对请求错误做些什么 return Promise.reject(error);});
}
window.onload = function () {getInfo();
}
二、ajax请求+传参+请求头
这个请求需要jquery的支持，所以要使用$.ajax的话要下载jquery
function getInfo() { $.ajax({url: `http://127.0.0.1:8080/login`, // 请求的URL method: 'get', // 请求方法 dataType: 'json', // 预期服务器返回的数据类型 headers: { 'Authorization': localStorage.getItem('token') },data: { // 要发送给后端的数据 username:"xx",pass:"12345"},success: function (response) { // 请求成功时的回调函数 }},error: function (error) { // 请求失败时的回调函数 console.log(error); // 输出错误信息 }});
}
window.onload = function () {getInfo();
}
三、输入框和选择器的获取和赋值，其他标签同理
1.输入框的获取和赋值
<input type="text" id="exampleInput" placeholder="输入用户名/手机号">通过input的id获取输入框内容的俩种方式
console.log(document.querySelector('#exampleInput').value)这个需要jquery插件实现
console.log($("#exampleInput").val())输入框的赋值：
document.querySelector('#exampleInput').value="11111"$("#exampleInput").val("xxxxxx")2.select标签的获取和数据回填
<select id="networkingModeSelect"><option value="1">WIFI</option><option value="7">蓝</option><option value="9">以/option><option value="0">蜂窝</option><option value="-1">无网络</option></select>获取到的值就是option里的value的值
console.log(document.getElementById("networkingModeSelect").value);console.log($("#networkingModeSelect").val());给select赋值的俩种方式
document.getElementById("networkingModeSelect").value = 9;$("#networkingModeSelect").get(0).value = 9;文章到此结束，希望对你有所帮助~
