Ajax :01

一.JSON

JSON也是一种字符串，是一种特殊的字符串，json对象既可以是字符串也可以是数值，null，数组，对象。

1. json 转 js（js 是 object 型）

var str = '{"name":"北斗","age":18}'
    var obj4 = JSON.parse(str)
    console.log(typeof obj4);

2.js 转 json（json 是 string 型）

var str1 = JSON.stringify(obj4)
    console.log(typeof str1);

二.Ajax 的使用

1.前后端交互
首先提取 tornado.web 数据库中的模块

import tornado.ioloop
import tornado.web

class MainHandler(tornado.web.RequestHandler):
    def get(self):
        self.write("Hello, world")

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

2. from 表单提交

（1）py

import tornado.ioloop
import tornado.web

class MainHandler(tornado.web.RequestHandler):
    def get(self):
        self.write("Hello, world")
        self.render("ajax2.html") //渲染页面

	def post(self):
        print(self.get_argument("user"))
        print(self.get_argument("pwd"))

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

（2）html

提交路径为 根目录，提交方式为 post

<form action="/" method="post">

    用户名: <input type="text" name="user"> <br>
    密&emsp;码: <input type="text" name="pwd">
    <input type="submit" value="提交">
    同步：（客户端） 提交请求 -》等待服务器处理 -》处理完毕 -》 这个期间客户端不能做其他事情
    异步：（客户端） 提交请求 -》等待服务器处理 -》处理完毕 -》 这个期间客户端可以做其他事情

</form>

3.ajax 前后端交互

（1）post

import tornado.ioloop
import tornado.web

class MainHandler(tornado.web.RequestHandler):
    def get(self):
        self.write("Hello, world")
        
	通过post get_argument接收数据  name属性
    def post(self):
        a = int(self.get_argument("aa"))
        b = int(self.get_argument("bb"))
        c = a + b
        #把结果传回前端
        r_data = {"cc":c}
        self.write(r_data)

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

$.ajax({
            "type":"post", //提交方式
            "url":"/", //提交路径
            "data":{ //传值
                "aa":a,
                "bb":b
            }

（2）get

import tornado.ioloop
import tornado.web

class MainHandler(tornado.web.RequestHandler):
    def get(self):
        self.write("Hello, world")
        # 渲染前端
        self.render("ajax2.html")

class Test(tornado.web.RequestHandler):
    def get(self):
        a = int(self.get_argument("aa"))
        b = int(self.get_argument("bb"))
        c = a + b
        r_data = {"cc": c}
        self.write(r_data)

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

<body>
<input type="text"> +
<input type="text"> =
<input type="text">
<button>和国际化</button>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
    //获取元素
    var apint = $("input")
    var button = $("button")

    button.click(function (){
        //拿到输入的值
        var a = apint.eq(0).val()
        var b = apint.eq(1).val()
        console.log(a);
        console.log(b);
        $.ajax({
            "type":"get", //提交方式
            "url":"/Test", //提交路径
            "data":{
                "aa":a,
                "bb":b
            },
            //c 成功返回成功回调函数
            "success":function (data) { //data 后台所返回的数据 r_data
                var c = data["cc"]
                //把值写入到前端
                apint.eq(2).val(c)
                console.log(c);
            },//失败返回失败回调函数
            "error":function (error) {
                console.log(error);
            }
        })
    })
</script>
</body>