原生ajax中get和post请求

后台代码：

class AjaxHanlder(tornado.web.RequestHandler):
    def get(self):
        print(self.get_argument('type',None))
        if self.get_argument('type',None):
            self.write("get ok")
        else:
            self.render('ajax_test.html')

    def post(self, *args, **kwargs):
        self.write("post ok")

前端ajax:

为了兼容各个浏览器都有ajax方法

    function GetXhr(){
        var xhr=null;
        if(XMLHttpRequest){
            xhr=new XMLHttpRequest();
        }else{
            xhr=new ActiveXObject("Microsoft.XMLHTTP");
        }
        return xhr;
    }

其中get请求一般都把数据放到url中，而不是send()中

function XhrGetRequest(){    var xhr=GetXhr();    //定义回调函数    xhr.onreadystatechange=function(){        if(xhr.readyState==4){            document.getElementsByClassName('reponse')[0].innerHTML=xhr.responseText;        }    }    //指定连接方式和地址---文件方式    xhr.open('get',"/ajax?type=1&kk=2",true);    //发出请求    xhr.send(null);}

只有post请求时，需要将数据放到send()中传递，并且需要设置请求头

function XhrPostRequest(){    var xhr=GetXhr();    xhr.onreadystatechange=function(){        if(xhr.readyState==4){            document.getElementsByClassName('reponse')[0].innerHTML=xhr.responseText;        }    }    xhr.open('post','/ajax',true);    //post需要设置请求头    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset-UTF-8");    //发送请求    xhr.send("type=1&kk=2");}

使用案例：

<body>
    <form method="post" action="login">
        用户名：<input id="user" type="text" name="username">
        密码：<input id="pwd" type="password" name="password">
        <input type="checkbox" id="auto" name="auto" value="1"/>七天免登录
        <input type="button" onclick="SubmitForm();" value="登录">
        <span class="err"></span>
    </form>
</body>
</html>
<script>
    var xhr=null;

    function SubmitForm(){
        var username=document.getElementById("user").value;
        var pwd=document.getElementById('pwd').value;
        var chkEle=document.getElementById('auto');
        var chk=null;
        if(chkEle.checked==true)
            chk=1;
        else
            chk=0;

        xhr=new XMLHttpRequest();
        /*参数    发送方式  发送地址 是否异步*/
        //xhr.open('GET',"/login",true);
        xhr.open("POST","/login",true);
        //当readystate值改变时会自动去触发对应函数，先对这个值进行判断，在决定对应的函数
        //0.未初始化，尚未调用open
        //1.启动，调用了open未调用send
        //2.发送，调用了send,未收到响应
        //3.接收，已经接收到了部分响应消息
        //4.完成，已经接收到所有的数据

        xhr.onreadystatechange =func;
        //setRequestHeader(String header,String value)设置请求头
        //getAllResponseHeaders()获取所有响应头
        //getResponseHeader(String header)获取响应头中指定的header的值
        //void abort()终止请求

        //post发送数据需要设置请求头
        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded; charset-UTF-8')
        //用于发送数据
        xhr.send('username='+username+';password='+pwd+';auto='+chk);

        //String responseText   服务器返回的数据字符串类型

        //XmlDocument responseXML 服务器返回的数据（xml对象）

        //Number states 状态码

        //String statesText 状态码对应文本
    }

    function func(){
        if(xhr.readyState == 4){
            console.log(xhr.responseText);
            var data=xhr.responseText;
            var ret_dict = JSON.parse(data);
            if(ret_dict.status){
                //登录成功
            }else{
                //登录失败
                var ele=document.getElementsByClassName('err')[0];
                ele.innerHTML="<h1 style=\"color:red;\">"+ret_dict.message+"</h1>"
            }
        }
    }
</script>

open(请求方式, URL, 是否异步)

send(请求体)

onreadystatechange，指定监听函数，它会在xmlHttp对象的状态发生变化时被调用

readyState，当前xmlHttp对象的状态，其中4状态表示服务器响应结束

status：服务器响应的状态码，只有服务器响应结束时才有这个东东，200表示响应成功；

responseText：获取服务器的响应体

代码实例：

<div>
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>班级</th>
                <th>编辑</th>
            </tr>
        </thead>
        <tbody>
                <tr><td>4</td>
                    <td>李四</td>
                    <td>16</td>
                    <td>男</td>
                    <td>C++工程师</td>
                    <td><a onclick="XhrPostRequest(this);">删除</a>|<a href="/edit_student.html?nid=4">编辑</a></td>
                </tr>
                <tr><td>5</td>
                    <td>fas</td>
                    <td>15</td>
                    <td>男</td>
                    <td>Python工程师</td>
                    <td><a onclick="XhrPostRequest(this);">删除</a>|<a href="/edit_student.html?nid=5">编辑</a></td>
                </tr>
        </tbody>
    </table>
</div>
</body>

<script>    var xhr=null    var thr=null    function GetXhr(){        if(XMLHttpRequest){            var Xh = new XMLHttpRequest();        }else{            Xh = new ActiveXObject('Microsoft.XMLHTTP');        }        return Xh    }    function call_func(){        if(xhr.readyState == 4){            var data=xhr.responseText;            var ret_dict = JSON.parse(data);            if(ret_dict.status){                //登录成功                alert("删除成功")                thr.parentElement.parentElement.remove()            }        }    }    function XhrPostRequest(ths){        thr=ths        xhr=GetXhr();        xhr.onreadystatechange = call_func;        var id=thr.parentElement.parentElement.childNodes[0].textContent;        xhr.open('get','/del_student.html?nid='+id);        xhr.send();    }</script>

关于更多信息，以及jquery中ajax使用可以参考

更多请看：原生ajax中get和post请求

>这里

来源：https://www.cnblogs.com/ssyfj/p/8532890.html

标签

post

ajax

pwd