后台代码：

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="">

        <thead>

            <tr>

                <th>ID</th>

                <th>姓名</th>

                <th>年龄</th>

                <th>性别</th>

                <th>班级</th>

                <th>编辑</th>

            </tr>

        </thead>

        <tbody>

                <tr><td></td>

                    <td>李四</td>

                    <td></td>

                    <td>男</td>

                    <td>C++工程师</td>

                    <td><a onclick="XhrPostRequest(this);">删除</a>|<a href="/edit_student.html?nid=4">编辑</a></td>

                </tr>

                <tr><td></td>

                    <td>fas</td>

                    <td></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请求

更多请看：http://www.cnblogs.com/yuanchenqi/articles/5997456.html

>这里

原生ajax中get和post请求的更多相关文章

  1. Django框架 之 基于Ajax中csrf跨站请求伪造

    Django框架 之 基于Ajax中csrf跨站请求伪造 ajax中csrf跨站请求伪造 方式一 1 2 3 $.ajaxSetup({     data: {csrfmiddlewaretoken: ...

  2. ajax中Post和Get请求方式的区别？

    ajax中Post和Get请求方式的区别: 1.Post传输数据时,不需要在URL中显示出来,而Get方法要在URL中显示. 2.Post传输的数据量大,可以达到2M,而Get方法由于受到URL长度的 ...

  3. AJax中post与get请求注意事项

    在使用ajax提交表单时,一定要区分提交按钮的形式和数据表头的设置,实例如下: GET请求: HTML代码: <!doctype html> <html lang="en& ...

  4. ajax中的setRequestHeader设置请求头

    1.问题引发点: 前不久发现一个问题: 前端并没有设置请求头信息里面的Accept-Encoding:gzip...但是在请求头中可以明显的看到Accept-Encoding:gzip, deflat ...

  5. 资料汇总--Ajax中Put和Delete请求传递参数无效的解决方法（Restful风格）【转】

    开发环境:Tomcat9.0 在使用Ajax实现Restful的时候,有时候会出现无法Put.Delete请求参数无法传递到程序中的尴尬情况,此时我们可以有两种解决方案:1.使用地址重写的方法传递参数 ...

  6. Ajax中Put和Delete请求传递参数无效的解决方法（Restful风格）

    本文装载自:http://blog.csdn.net/u012737182/article/details/52831008    感谢原文作者分享 开发环境:Tomcat9.0 在使用Ajax实现R ...

  7. 原生Ajax发送get、post请求每一步

    说明 发送Ajax的请求的核心对象是XMLHttpRequest,因此我们需要了解该对象的相关属性和方法 方法(图一) 属性(图二) 第一步:创建 XMLHttpRequest对象,下面都简写为 xh ...

  8. 原生ajax中readyState中的含义以及HTTP协议状态码的含义

    xmlhttp.readyState的值及解释: 0:请求未初始化(还没有调用 open()). 1:请求已经建立,但是还没有发送(还没有调用 send()). 2:请求已发送,正在处理中(通常现在可 ...

  9. ajax中加上AntiForgeryToken防止CSRF攻击

    经常看到在项目中ajax post数据到服务器不加防伪标记,造成CSRF攻击 在Asp.net Mvc里加入防伪标记很简单在表单中加入Html.AntiForgeryToken()即可. Html.A ...

随机推荐

  1. 第三个Sprint ------第三天

    出题界面代码 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns ...

  2. Python学习笔记（二）——数据类型

    1.数据类型 Python有五个标准的数据类型: Numbers(数字) String(字符串) List(列表) Tuple(元组) Dictionary(字典) 2.Python数字类型 Pyth ...

  3. Flask-论坛开发-2-Jinja2模板

    对Flask感兴趣的,可以看下这个视频教程:http://study.163.com/course/courseLearn.htm?courseId=1004091002 1. Jinja2 模板介绍 ...

  4. Ehcache Monitor使用一例

    场景介绍:系统集成Shiro,使用Ehcache保存用户登录限制次数,常有用户密码被锁,影响工作效率. 在不考虑集成SSO,LDAP,也不引入身份校验,邮件,短信等解锁特性下.使用Ehcache Mo ...

  5. [转帖]知乎专栏:正确使用 Docker 搭建 GitLab 只要半分钟

    正确使用 Docker 搭建 GitLab 只要半分钟 https://zhuanlan.zhihu.com/p/49499229 很多程序员在内网搭建 gitlab 都搭建的坑坑洼洼,不支持 htt ...

  6. Python 零基础 快速入门 趣味教程 (咪博士 海龟绘图 turtle) 4. 函数

    什么样的程序员才是优秀的程序员?咪博士认为“慵懒”的程序员才是真正优秀的程序员.听起来不合逻辑?真正优秀的程序员知道如何高效地工作,而不是用不止境的加班来完成工作任务.函数便是程序员高效工作的利器之一 ...

  7. linux 为tomcat指定jdk

    Linux为Tomecat指定JDK   在搭建Jenkin+Sonar集成时,由于系统环境配置了jdk1.7,但是jenkins在安装sonar的插件时,需要jdk1.8.,所以需要在Tomcat指 ...

  8. 将关系型数据库抽取成redis的思路

    思路是 先把id抽取出来形成一个·list表示数量 然后再把表变成键值对形式把id当做成键

  9. luogu2149 Elaxia的路线 (dijkstra+拓扑dp)

    先标记上一个人所有最短路上的边(同时也要标记反向边) 然后拿着另一个人最短路上的边(会构成一个DAG)去做拓扑dp,记从原点到某个点的最大的某个路径的被标记的边的个数 #include<bits ...

  10. Luogu 1514 引水入城 （搜索，动态规划）

    Luogu 1514 引水入城 (搜索,动态规划) Description 在一个遥远的国度,一侧是风景秀美的湖泊,另一侧则是漫无边际的沙漠.该国的行政区划十分特殊,刚好构成一个N行M列的矩形,如上图 ...