Ajax 原生js封装ajax()

            //定义myajax(参数类型json格式)  paramJson={ type:'',url:'' }
            function myajax(paramJson){
                //get  url= 02get.php?uname=name&upsd=psd
                //1.判断请求类型 get post方式
                if(paramJson.type.toLowerCase()=='get'){
                    //console.log(paramJson.data);//
                    //2.处理data数据  json-->数组
                    var arr=[];// ["uname=11", "upsd=11"]
                    for(var key in paramJson.data){
                        var str=key+'='+paramJson.data[key];//str= 'uname=11'
                        arr.push(str);
                    }
                    //console.log(arr);
                    //数组转字符串 [a,b]--> a&b
                    var strUrl=arr.join('&');
                    //console.log(strUrl);//uname=22&upsd=22
                    paramJson.url+='?'+ strUrl;
                   // console.log(paramJson.url);
                }else if(paramJson.type.toLowerCase()=='post'){
                    //data数据 存 formdata 
                    var formdata=new FormData();//fomdata.append(key,value)
                    for(var key in paramJson.data){
                        formdata.append(key,paramJson.data[key]);
                    }
                }
                //创建xmlhttprequest()
                var xhr=new XMLHttpRequest();
                //准备  get post
                if(paramJson.type.toLowerCase()=='get'){
                    xhr.open('get',paramJson.url,true);
                    xhr.send();
                }else if(paramJson.type.toLowerCase()=='post'){
                    xhr.open('post',paramJson.url,true);
                    xhr.send(formdata);
                }
                //成功
                xhr.onreadystatechange=function(){
                    if(xhr.readyState==4 && xhr.status==200){
                        paramJson.success(xhr.responseText);
                    }
                }
            }

eg:直接引用;

    <form>
        <input type="text" class='name'> <br>
        <input type="password" class='psd'> <br>
        <button class='btn' type='button'>登录</button>
    </form>
    <script>
        window.onload=function(){
            //点击事件
            var btn=document.querySelector('.btn');
            btn.onclick=function(){
                //获取用户输入的值
                var name=document.querySelector('.name').value;
                var psd=document.querySelector('.psd').value;
                //调用一个方法 ajax()   myajax()
                myajax({
                    type:'post',
                    url:'03post.php',
                    data:{
                        uname:name,
                        upsd:psd
                    },
                    dataType:'json',
                    success:function(data){
                        console.log(data);//data成功的数据
                    }
                });
            }
        }
    </script>
    <script src='myajax.js'></script>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值