Tornado + Ajax 实现页面内刷新

来源：互联网发布：.net域名编辑：程序博客网时间：2024/06/05 12:48

需要的环境

jquery-3.2.1.min.js (从jQuery官网下载 http://jquery.com/download/）
simplejson （pip install simplejson）

简单的例子，从第一个输入框里输入一段文本，点击按钮实现将第一个框内的值传递到第二个框中

这里写图片描述

test.html

<!DOCTYPE html><html><head>    <title></title></head><body>        <input type="text" id="na" />        <input type="button" value="click" onclick="DoAjax();" />{#点击按钮调用DoAjax方法#}        <input type="text" id="nb" />        <script src="{{static_url("js/jquery-3.2.1.min.js")}}"></script> {#jquery文件位置#}        <script type="text/javascript">            function DoAjax(){                var temp = $('#na').val();//从第一个输入框里获取数据                $.ajax({                    url:"/test",//调用的是这个url对应的那个Handler                    type:"POST",//Post方法                    data:{dat:temp},//要往服务器传递的数据                    success:function(arg){//成功从服务端获取到值，参数arg表示从服务端的Handler获取的数据                        var obj = jQuery.parseJSON(arg);//获取的数据一般为json格式，用这个方法来解析数据                        console.log(obj.status);                        console.log(obj.message);                        console.log(obj.data);                        $('#nb').val(obj.data[0]);//给第二个输入框赋值                    },                    error:function(){//获取失败                        console.log("failed");                    }                });            }        </script></body></html>

test.py

#-*-coding:utf-8-*-import tornado.webimport simplejson as jsonclass TestHandler(tornado.web.RequestHandler):    def get(self):        self.render("test.html")    def post(self):        str=self.get_argument("dat",None)#此处的'dat'对应ajax里的data:{dat:temp}的dat,即字典的键        print str        data = {'status':0,'message':'successfully','data':[str,]}#封装数据        self.write(json.dumps(data))        #调用json将数据格式化，使用write方法把数据传回到ajax在success情况下的的arg参数里

TORNADO url设置

 (r"/test.*", TestHandler),

效果：
第一个框中输入
这里写图片描述
点击按钮，第二个框中赋值完成

控制台输出：

阅读全文

1 0