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

2024-01-23 13:45:52

可以用自己的电脑开启虚拟机，然后链接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()

码农公寓

相关文章