Hello WEB！ AJAX yyds（二）--前后端交互

2021-08-04 11:04:55 阅读：184 来源： 互联网

标签：__ WEB yyds -- self get tornado web import

可以用自己的电脑开启虚拟机，然后链接pycharm，在python编译器中一定要装好tornado这个库。

链接好pycharm和虚拟机后一定要记得上传本地文件到虚拟机中。

JS交互

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前端页面-form表单</title>
</head>
<body>

<form action="/" method="post">
    用户名：<input type="text" placeholder="请输入你的用户名" name="user"><br>
    密&emsp;码：<input type="password" placeholder="请输入你的密码" name="pwd"><br>

    <button type="submit">提交</button>&emsp;<button type="reset">取消</button>

    <span style="color:#ffcc00;">${MAX=c15,VALUE:VALUE0}${StringArrayValue;12857;2418_4749}</span>
    面积最大，为<span style="color:#ffcc00;">${MAX=c15,VALUE:c15}</span>

</form>

</body>
</html>

python文件

import tornado.web
import tornado.ioloop
import tornado.web


class MainHandler(tornado.web.RequestHandler):
    def get(self):
        self.render('2.前后端交互.html')

    def post(self, *args, **kwargs):
        print(self.get_argument('user'))
        print(self.get_argument('pwd'))
        self.write('登陆成功~')


if __name__ == "__main__":
    application = tornado.web.Application([
        (r"/", MainHandler),
    ])
    application.listen(8888)
    tornado.ioloop.IOLoop.current().start()

AJAX交互

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQ+ajax</title>
</head>
<body>

<h1>计算器</h1>

<input type="text" name="a"> + <input type="text" name="b"> = <input type="text" name="c">
<button id="btn1">计算</button>

<!--网址引入-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

<!--获取文本框-->
<script>
    var ipt = $("input");
    var btn = $('#btn1');

    btn.click(function () {
        // 获取值
        var x = ipt.eq(0).val();  //string类型
        var y = ipt.eq(1).val();
        $.ajax({
            "type":"post", //数据传输的类型，方式
            "url":"/",     //提交的路径
            "data":{"XX":x, "YY":y},
            "success":function (data2){
                z = data2['CC'];
                ipt.eq(2).val(z);
            }
        })
    })

</script>

</body>
</html>

python

import tornado.web
import tornado.ioloop
import tornado.web


class MainHandler(tornado.web.RequestHandler):
    def get(self):
        self.render('3.前后端Jq+ajax.html')

    def post(self, *args, **kwargs):
        print(self.get_argument('XX'))
        print(self.get_argument('YY'))

        a = int(self.get_argument('XX'))
        b = int(self.get_argument('YY'))
        c = a + b
        print(c)

        return_data = {"CC":c}  #将c用字典赋值
        self.write(return_data) #将数据传输到网页端


if __name__ == "__main__":
    application = tornado.web.Application([
        (r"/", MainHandler),
    ])
    application.listen(8888)
    tornado.ioloop.IOLoop.current().start()

标签：__,WEB,yyds,--,self,get,tornado,web,import
来源： https://blog.csdn.net/weixin_45160152/article/details/119377590

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Hello WEB！ AJAX yyds（二）--前后端交互