zoukankan      html  css  js  c++  java
  • 原生ajax的get和post方法封装

    原生ajax的get和post方法封装:https://www.cnblogs.com/qiuxiaozhen/p/10568314.html

    get 方法

    复制代码
        function serialize (data) {
          if (!data) {
            return '';
          }
          
          var paris = [];
          for (var key in data) {
            if (!data.hasOwnProperty(key) || typeof data[key] === 'function') {
              continue;
            }
            var name = encodeURIComponent(key);
            var value = encodeURIComponent(data[key].toString());
            paris.push(name + '=' + value);
          }
          return paris.join('&');
        }
    
        function get (url, options, callback) {
          var req;
          if (window.XMLHttpRequest) {
            req = new XMLHttpRequest();
          } else if (window.ActiveXObject) { // 兼容IE7及以下版本
            req = new ActiveXObject();
          }
          
          req.onreadystatechange = function () {
            if (req.readyState === 4) {
              if (req.status === 200) {
                console.log('请求成功');
                callback(req.response);
              }
            } else {
              console.log('请求中...');
            }
          }
          
          // 将传递的参数序列化
          if (serialize(options) !== '') {
            url = url + '?' + serialize(options);
          }
    
          req.open('get', url);
          req.send(null);
        }
    复制代码

     post方法

    复制代码
        function serialize (data) {
          if (!data) {
            return '';
          }
          
          var paris = [];
          for (var key in data) {
            if (!data.hasOwnProperty(key) || typeof data[key] === 'function') {
              continue;
            }
            var name = encodeURIComponent(key);
            var value = encodeURIComponent(data[key].toString());
            paris.push(name + '=' + value);
          }
          return paris.join('&');
        }
    
        function post (url, options, callback) {
          var req;
          if (window.XMLHttpRequest) {
            req = new XMLHttpRequest();
          } else if (window.ActiveXObject) { // 兼容IE7及以下版本
            req = new ActiveXObject();
          }
          
          req.onreadystatechange = function () {
            if (req.readyState === 4) {
              if (req.status === 200) {
                console.log('请求成功');
                callback(req.response);
              }
            } else {
              console.log('请求中...');
            }
          }
    
          req.open('post', url);
          req.send(serialize(options));
        }
    复制代码

    get与post方法结合

    复制代码
        function serialize (data) {
          if (!data) {
            return '';
          }
          
          var paris = [];
          for (var key in data) {
            if (!data.hasOwnProperty(key) || typeof data[key] === 'function') {
              continue;
            }
            var name = encodeURIComponent(key);
            var value = encodeURIComponent(data[key].toString());
            paris.push(name + '=' + value);
          }
          return paris.join('&');
        }
    
        function request (method, url, options, callback) {
          var req;
          if (window.XMLHttpRequest) {
            req = new XMLHttpRequest();
          } else if (window.ActiveXObject) { // 兼容IE7及以下版本
            req = new ActiveXObject();
          }
          
          req.onreadystatechange = function () {
            if (req.readyState === 4) {
              if (req.status === 200) {
                console.log('请求成功');
                callback(req.response);
              }
            } else {
              console.log('请求中...');
            }
          }
          
          url = method === 'get' && serialize(options) !== '' ?  url + '?' + serialize(options) : url;
          let sendParams = method === 'get' ? null : serialize(options);
          
          req.open(method, url);
          req.send(sendParams);
        }
    复制代码
  • 相关阅读:
    【Windows SDK学习】基础概念介绍
    ConcurrentHashMap终于安排上了--按半年统计用户访问量
    jpa执行原生sql返回自定义类型对象
    MySQL中按周、月、季、年分组统计(转)
    jpa+多表关联+动态拼接参数+分页查询
    RestTemplate(含官方文档)
    com.netflix.client.ClientException: Load balancer does not have available server for client: graph-app
    因为导错包, 我把JPQL换成了Querydsl, 我佛了
    继承WebMvcConfigurationSupport和实现WebMvcConfigurer区别
    使用 Cobbler 安装一台 CentOS 主机
  • 原文地址:https://www.cnblogs.com/bydzhangxiaowei/p/14194087.html
Copyright © 2011-2022 走看看