需求：使用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赋值的俩种方式文章来源：https://www.toymoban.com/news/detail-770415.html
document.getElementById("networkingModeSelect").value = 9;
$("#networkingModeSelect").get(0).value = 9;文章到此结束，希望对你有所帮助~文章来源地址https://www.toymoban.com/news/detail-770415.html
到了这里，关于html-css-js使用axios和ajax获取接口并携带请求头+获取输入框或选择器内容的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
