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;

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

相关推荐
TDengine (老段)2 小时前
TDengine 中的关联查询
大数据·javascript·网络·物联网·时序数据库·tdengine·iotdb
再学一点就睡3 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木4 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
難釋懷5 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript
还是鼠鼠5 小时前
Node.js全局生效的中间件
javascript·vscode·中间件·node.js·json·express
自动花钱机6 小时前
WebUI问题总结
前端·javascript·bootstrap·css3·html5
bst@微胖子6 小时前
Flutter项目之登录注册功能实现
开发语言·javascript·flutter
拉不动的猪6 小时前
简单回顾下pc端与mobile端的适配问题
前端·javascript·面试
qp6 小时前
21.OpenCV获取图像轮廓信息
javascript·opencv·webpack
烛阴7 小时前
深入浅出:JavaScript ArrayBuffer 的使用与应用
前端·javascript