html-css-js使用axios和ajax获取接口并携带请求头+获取输入框或选择器内容

需求：使用axios或者Ajax获取接口，有些需要获取到输入框，或者选择器内容之后传给接口，也就是写了几种不同请求的方法，网上有很多方法，本文章算是个归纳吧。

一、axios请求+传参+请求头

1.github下载axios

我框住的这俩下谁都行，我下的是第一个

Releases · axios/axios (github.com)

下载后解压打开找到dist文件

这个就是axios文件了

2.页面加载完成后就请求接口

第一种：axios.get,axios.post,axios.delete都行，第一个参数是后台请求地址，第二个是传参

javascript 复制代码

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的语法实现动态添加

javascript 复制代码

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自带的请求拦截即可

javascript 复制代码

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

javascript 复制代码

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.输入框的获取和赋值

html 复制代码

 <input type="text" id="exampleInput" placeholder="输入用户名/手机号">

通过input的id获取输入框内容的俩种方式

javascript 复制代码

console.log(document.querySelector('#exampleInput').value)

这个需要jquery插件实现

javascript 复制代码

console.log($("#exampleInput").val())

输入框的赋值：

javascript 复制代码

document.querySelector('#exampleInput').value="11111"

javascript 复制代码

$("#exampleInput").val("xxxxxx")

2.select标签的获取和数据回填

javascript 复制代码

    <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的值

javascript 复制代码

 console.log(document.getElementById("networkingModeSelect").value);
 console.log($("#networkingModeSelect").val());

给select赋值的俩种方式

javascript 复制代码

        document.getElementById("networkingModeSelect").value = 9;
        $("#networkingModeSelect").get(0).value = 9;

文章到此结束，希望对你有所帮助~