页面快捷操作之JS脚本

本文阅读量: 2019-06-22

场景

在某些时候，我们可能需要批量操作某些后台接口处理一些数据，正常情况下，我们都会直接使用我们熟知的语言快速写一个程序去运行。但是写这个程序其实挺费时的，所以如果能直接在页面直接写js脚本快速操作批量数据的更改会更加方便。那么我们如何做呢。

01 页面控制台引入Jquery

var importJs=document.createElement('script') //在页面新建一个script标签
importJs.setAttribute("type","text/javascript") //给script标签增加type属性
importJs.setAttribute("src", 'http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js') //给script标签增加src属性， url地址为cdn公共库里的
document.getElementsByTagName("head")[0].appendChild(importJs) //把importJs标签添加在页面

02 控制台设置Jquery为同步

1
2
3

$.ajaxSetup({
  async: false
});

03 控制台设置Jquery请求头

包括授权需要的一些信息都可以直接放到请求头里

$.ajaxSetup({
  //发送请求前触发
  beforeSend: function (xhr) {
    //可以设置自定义标头
    xhr.setRequestHeader('Accept', 'application/json, text/plain, */*');
    xhr.setRequestHeader('Accept-Language', 'zh-CN,zh;q=0.9,en;q=0.8');
    xhr.setRequestHeader('Authorization', 'bearer 253150b7-756a-4268-b47b-da66969d53fb');
  }
})

04 通过Jquery的get post等操作接口

for (var i=0; i<phoneArr.length; i++) {
   var result = $.get('http://xxx.com/blacklists?size=10&page=1&phoneNum=' + phoneArr[i]);
   var response = JSON.parse(result.responseText)
   if (response.total == 0) {
     continue;
   }
   console.log(response)
}

05 页面控制台引入md5加密

针对需要前端md5加密的场景也可以这样引入md5，其他依赖的js同理都可以这样快速引入。

var importJs=document.createElement('script') //在页面新建一个script标签
importJs.setAttribute("type","text/javascript") //给script标签增加type属性
importJs.setAttribute("src", 'https://cdn.bootcss.com/blueimp-md5/2.11.1/js/md5.min.js') //给script标签增加src属性， url地址为cdn公共库里的
document.getElementsByTagName("head")[0].appendChild(importJs) //把importJs标签添加在页面
var md5value = md5('123456');
console.log(md5value)