Ajax，指的是网页异步刷新，一般的实现均为js代码向server发POST请求，然后将收到的结果返回在页面上。

 

这里我编写一个简单的页面，ajax.html

  1. <html>
  2. <head>
  3.     <title>测试Ajax</title>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  6.  
  7.     <style type="text/css">
  8. #result{
  9.     border: 10px;
  10.     font-size: 50px;
  11.     background: #ff0fef;
  12. }
  13.  
  14.     </style>
  15. </head>
  16. <body>
  17.  
  18.     <input type="text" id="word" > <br>
  19.     <button id="foo">点击</button>
  20.  
  21.     <div id="result">
  22.  
  23.     </div>
  24.  
  25. <script type="text/javascript">
  26.     $("#foo").click(function()
  27.     {
  28.         var word = $("#word").val(); //获取文本框的输入
  29.  
  30.         //把word发给后台php程序
  31.         //返回的数据放在data中，返回状态放在status
  32.         $.post("/test",{message:word}, function(data,status){
  33.             if(status == "success")
  34.             {
  35.                 $("#result").html(data);
  36.             }
  37.             else
  38.             {
  39.                 alert("Ajax 失败");
  40.             }
  41.         });
  42.     });
  43.  
  44. </script>
  45.  
  46. </body>
  47. </html>

注意，从上面的代码可以看出，数据存储在“message”字段中。

所以后台从message中解析数据，我们记得是get_argument方法。

所以后台的python代码为：

  1. import tornado.ioloop
  2. import tornado.web
  3.  
  4. class MainHandler(tornado.web.RequestHandler):
  5.     def get(self):
  6.         self.render("ajax.html")
  7.  
  8. class AjaxHandler(tornado.web.RequestHandler):
  9.     def post(self):
  10.         #self.write("hello world")
  11.         self.write(self.get_argument("message"))
  12.  
  13. application = tornado.web.Application([
  14.     (r"/", MainHandler),
  15.     (r"/test", AjaxHandler),
  16.     ])
  17.  
  18. if __name__ == '__main__':
  19.     application.listen(8888)
  20.     tornado.ioloop.IOLoop.instance().start()

访问首页，就渲染ajax前端页面，而AjaxHandler处理真正的ajax异步请求。

 

这里总结下流程：

1.用户访问home页面，tornado使用MainHandler返回其中的ajax.html页面

2.用户填写信息，点击按钮，因为之前加载js代码，注册了回调函数，所以触发Ajax

3.js向后台发post请求。

4.根据请求的URL，tornado使用AjaxHandler处理post请求，将信息原样返回。

5.js收到数据，调用之前的回调函数，将结果显示在html页面上。

使用Tornado实现Ajax请求的更多相关文章

  1. AJAX请求和跨域请求详解（原生JS、Jquery）

    一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数 ...

  2. 一步步学习javascript基础篇（9）：ajax请求的回退

    需求1: ajax异步请求 url标识请求参数(也就是说复制url在新页面打开也会是ajax后的效果) ajax异步请求没问题,问题一般出在刷新url后请求的数据没了,这就是因为url没有记录参数.如 ...

  3. 配置Chrome支持本地（file协议）的AJAX请求

    什么问题 WEB开发过程中,很多时候我们都是写一些简单的Demo,并不是开发一个完整项目,此时我们常见的操作是: 新建文件夹 新建需要的文件 在Sublime(或其他编辑器)中完成DEMO的编码 双击 ...

  4. JQuery使用deferreds串行多个ajax请求

    使用JQuery对多个ajax请求串行执行. HTML代码: <a href="#">Click me!</a> <div></div&g ...

  5. ajax请求成功后打开新开窗口(window.open())被拦截的解决方法

    问题:今天在做项目时需要在ajax请求成功后打开一个新的窗口,此时遇到浏览拦截了新窗口的问题,尝试在ajax 回调函数中模拟执行 click 或者 submit 等用户行为(trigger('clic ...

  6. 关于ajax请求，在参数中添加时间戳的必要性

    之前做项目的时候,看到别人的前端ajax请求代码中,都会带有一个时间戳类型的参数,当时随便查了一下,是为了防止浏览器缓存的原因,所以也没有进行深究,每次写的时候也习惯性的带一个,最近新项目中,我发现好 ...

  7. SpringMVC下Ajax请求的方法，@Responsebody如果返回的是布尔值，ajax不会接到任何回传数据

    SpringMVC框架下,如果用ajax向后台请求得方法如果使用@Responsebody返回布尔值的话,ajax得不到任何的回传数据. 但是如果返回String类型,就是正常的. 测试了下代码写得没 ...

  8. 【学习篇：他山之石，把玉攻】Ajax请求安全性讨论

    在开发过程中怎样考虑ajax安全及防止ajax请求攻击的问题. 先上两段网摘: Ajax安全防范的方法: 判断request的来源地址.这样的方式不推荐,因为黑客可以更改http包头,从而绕过检测. ...

  9. jQuery Ajax请求（关于火狐下SyntaxError: missing ] after element list ajax返回json，var json = eval("("+data+")"); 报错）

    $.ajax({    contentType: "application/x-www-form-urlencoded;charset=UTF-8" ,    type: &quo ...

随机推荐

  1. SPOJ-913

    Query on a tree II Time Limit: 433MS   Memory Limit: 1572864KB   64bit IO Format: %lld & %llu Su ...

  2. python常用内置函数整理

    1.最常见的内置函数是print print("Hello World!") 2.数学运算 abs(-5) # 取绝对值,也就是5 round(2.6) # 四舍五入取整,也就是3 ...

  3. c语言中Triplet是什么意思？

    此词条多出现于三元组抽象数据类型的定义. 例如: 数据结构编程试验中,构造三元组类型. 1．三元组抽象数据类型的定义 ADT Triplet { 数据对象:D={e1, e2, e3| e1, e2, ...

  4. HDU 1280 前m大的数【排序 / hash】

    前m大的数 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  5. 2018 ACM-ICPC 沈阳网络赛

    Problem A Problem B Problem C Problem D Problem E Problem F Problem G Problem H Problem I Problem J ...

  6. 3、Django实战第3天：数据建模

    users modesl.py设计 UserProfile 用户信息 EmailVerifyRecord 验证码 Banner 轮播图 之前我们生成了Django默认的数据表,里面有张表示auth-u ...

  7. telnet执行过程及验证远程服务器是否打开

    telnet执行过程: 工作原理: 当你用Telnet登录进入远程计算机系统时,你事实上启动了两个程序,一个 叫Telnet客户程序,它运行在你的本地机上:另一个叫Telnet服务器程序,它运 行在你 ...

  8. 设置参数进行java的jvm监控

    1.设置jconsole监控服务器的tomcat参数及java jvm大小,执行命令vi ../tomcat/bin/catalina.sh  “在服务器安装的tomcat目录下” JAVA_OPTS ...

  9. UVA 1514 Piece it together （二分图匹配）

    [题目链接] Link [题目大意] 给你一些由一块黑块和两块白块组成的L形拼图,问你是否能够拼成给出的图 [题解] 我们将所有的黑块拆点,拆分为纵向和横向,和周围的白块连边, 如果能够得到完美匹配, ...

  10. 【找规律】Codeforces Round #392 (Div. 2) C. Unfair Poll

    C. Unfair Poll time limit per test 1 second memory limit per test 256 megabytes input standard input ...