自定义封装ajax，复制即可用

Posted 2020-10-03 骑士007

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自定义封装ajax，复制即可用相关的知识，希望对你有一定的参考价值。

支持get、post请求

  1 <!DOCTYPE html>
  2 <html>
  3 
  4     <head>
  5         <meta charset="UTF-8">
  6         <title>自定义封装ajax</title>
  7     </head>
  8 
  9     <body>
 10     </body>
 11 
 12 </html>
 13 <script type="text/javascript">
 14     function ajax(obj) {
 15 
 16         obj = obj || {};
 17         obj.method = obj.method.toUpperCase() || "POST";
 18         obj.url = obj.url || "";
 19         obj.async = obj.async || true;
 20         obj.data = obj.data || null;
 21         obj.success = obj.success || function() {};
 22         obj.headers = obj.headers || null;
 23         var xmlHttp = null;
 24 
 25         if(window.XMLHttpRequest) {
 26 
 27             xmlHttp = new XMLHttpRequest(); //非IE浏览器
 28 
 29         } else {
 30             xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") //IE
 31         }
 32 
 33         //            处理参数
 34 
 35         if(obj.method.toUpperCase() == "POST") {
 36             xmlHttp.open(obj.method, obj.url, obj.async);
 37 
 38             if(obj.headers.ContentType) {
 39 
 40                 xmlHttp.setRequestHeader("Content-Type", obj.headers.ContentType);
 41 
 42             } else {
 43 
 44                 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
 45 
 46             }
 47 
 48             xmlHttp.send(JSON.stringify(obj.data)); //到了这的post是各个参数拼接在一起了，类似get请求？？？？？？？？？？
 49         } else {
 50             var par = [];
 51 
 52             for(var key in obj.data) {
 53 
 54                 par.push(key + ‘=‘ + obj.data[key])
 55 
 56             }
 57             var postData = par.join("&");
 58 
 59             xmlHttp.open(obj.method, obj.url + "?" + postData, obj.async);
 60             xmlHttp.send(null)
 61 
 62         }
 63 
 64         xmlHttp.onreadystatechange = function() {
 65 
 66             if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
 67                 obj.success(JSON.parse(xmlHttp.responseText))
 68             }
 69 
 70         }
 71 
 72     }
 73 
 74     //get请求实例
 75     ajax({
 76 
 77         method: ‘get‘,
 78         url: "http://risk.haitun.hk/risk-console/risk/messageInfo/list",
 79         data: {
 80             msgType: 1,
 81             pageNum: 1,
 82             pageSize: 6
 83         },
 84         success: function(res) {
 85             console.log(res, ‘get请求实例‘)
 86         }
 87 
 88     })
 89 
 90     //post请求实例
 91     ajax({
 92         method: ‘POST‘,
 93         url: "http://risk.haitun.hk/risk-console/risk/riskRule/list",
 94         data: {
 95             pageNum: 1,
 96             pageSize: 10
 97         },
 98         async: false,
 99         headers: {
100             "ContentType": "application/json;charset=utf-8" //注意头部，ContentType
101         },
102         success: function(res) {
103 
104             console.log(res, ‘post请求实例‘)
105 
106         }
107     })
108 </script>

以上是关于自定义封装ajax，复制即可用的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段14——Vue的axios网络请求封装

PHP后台核心框架自定义扩展功能直接上手做功能开发即可

VsCode编辑器如何自定义代码片段

使用自定义钩子封装 useEffect 和 AJAX 请求

node.js -- Ajax封装