Tornado + Ajax 实现页面内刷新

需要的环境

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.web
import simplejson as json

class 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),

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

控制台输出：

Tornado + Ajax 实现页面内刷新

猜你喜欢