zoukankan      html  css  js  c++  java
  • 原生ajax的封装,没有兼容ie

     function ajax (options) {
                var defaults = {
                    type:'get',
                    url:'',
                    data:'',
                    header:{
                        'Content-Type':'application/x-www-form-urlencoded'
                    },
                    success: function(){},
                    error: function(){}
                }
                // 使用options中的属性覆盖defaults中的属性
                Object.assign(defaults,options)
                //创建ajax对象
                var xhr = new XMLHttpRequest();
                //拼接请求参数变量
                var params = '';
                for(var attr in defaults.data){
                    params += attr + '=' + defaults.data[attr] + '&';
                }
                //截取字符串,去掉最后一个&符号
                params = params.substr(0,params.length-1);
                //判断请求方式
                if(defaults.type == 'get'){
                    defaults.url = defaults.url + '?' + params;
                }
                //配置ajax对象
                xhr.open(defaults.type, defaults.url)

                //判断请求方式为post
                if(defaults.type == 'post'){
                    //用户希望向服务器端传递的请求参数
                    var contentType = defaults.header['Content-Type']
                    //设置请求参数格式类型
                    xhr.setRequestHeader('Content-Type', contentType);
                    
                    if(contentType == 'application/json'){
                        xhr.send(JSON.stringify(defaults.data))
                    }else{
                        xhr.send(params)
                    }
                }else{
                    xhr.send();
                }
                //监听xhr下的onload事件
                xhr.onload  = function (){
                    //获取响应头部中的数据来判断返回的数据类型
                    var contentType = xhr.getResponseHeader('Content-Type');
                    var respondText = xhr.responseText;
                    //如果响应数据类型包括application/json
                    if(contentType.includes('application/json')){
                        responseText = JSON.parse(respondText)
                    }
                    //当http状态码为200时
                    if(xhr.status == 200){
                        defaults.success(responseText,xhr)
                    }else{
                        defaults.error(responseText,xhr);
                    }
                }
            }
     
     
            ajax({
                // type:'post',  //默认get请求,需要用post请求可以写出来
                url:'填写自己的api接口',
                success: function(data){  //请求成功回调
                    console.log(data);
                }
            })
  • 相关阅读:
    Django URL
    django初识
    django 相关配置(pycharm)
    mysql数据库语言分类
    css常用
    Django—BBS注册页面
    Django—Auth认证模块
    Django—中间件
    Django—form组件,cookie和session
    Django—AJAX
  • 原文地址:https://www.cnblogs.com/xu3241/p/13282802.html
Copyright © 2011-2022 走看看