Ajax 原生js封装ajax()

最新推荐文章于 2024-07-29 19:12:20 发布

boonyaxnn

最新推荐文章于 2024-07-29 19:12:20 发布

阅读量139

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/boonyaxnn/article/details/89927555

版权

Ajax 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

            //定义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>