潭州课堂25班：Ph201805201 WEB 之 Ajax第八课 (课堂笔记)

js 《——》jq

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>一</div>
    <div>二</div>
    <div>三</div>

    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script>

        // JQ --> JS
        var $div = $('div');            //JQ 对象
        var div0 = $('div')[0];         // JS 对象
        var div1 = $('div').get(1);     // JS 对象

        // js --> jq
        var div = document.getElementsByTagName('div');
        var $divs = $(div);
    </script>
</body>
</html>

this 特殊选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <!--<style>-->
        <!--div{-->
            <!--color: ;-->
        <!--}-->
    <!--</style>-->
<body>
    <div>一二三四</div>

    
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script>
        $('div').click(function () {
            var $div = $(this);
            $div.css('color','yellow')      // 特殊选择器指的是当前元素
        })
    </script>
</body>
</html>

each

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li>1aa</li>
        <li>2bb</li>
        <li>3cc</li>
        <li>4dd</li>
    </ul>

    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script>

        // JQ 里的 each 方法
        // $.each(['a','b','c'],function(i,n){
        //     console.log(i+':'+n);            //类似 for 循环
        // });

        var $ul = $('li');
        $.each($ul,function (i,li) {
            console.log($(li).text());         //  JQ 依次拿到 li 中的文字
            console.log(li.innerText);         //  JS 依次拿到 li 中的文字
        })

        $.each($ul,function () {
            console.log($(this).text());         //  JQ 依次拿到 li 中的文字
            console.log(this.innerText);         //  JS 依次拿到 li 中的文字
        })
        
    </script>
</body>
</html>

json

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

    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

    <script>

        // json
        var user = {
            'name':'aa',
            'gae':18,
            'hobby':'sing'
        };
        // 读
        console.log(user.name);
        //写
        user.name = 'bb'
        console.log(user.name);

        // 迭代
        for (var key in user) {
            console.log(key+':'+user[key]);
        }

        // json ---> 字符串
        var str = JSON.stringify(user);         //{"name":"bb","gae":18,"hobby":"sing"} string
        console.log(str,typeof (str))

        // 字符 串 ----》 json
        var obj = JSON.parse(str);
        console.log(obj);
    </script>
</body>
</html>

form 表单

前后台的交互，

前台代码　　命名为‘form-1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="/text" method="post">
        <p>用户名：<input type="text" name="user" placeholder="请输入用户名" ></p>
        <p>密 码：<input type="password" name="psw" placeholder="请输入密码" ></p>
        <input type="submit" value="提交">
    </form>

</body>
</html>

后台代码命名为 app.py

# -*- coding:utf-8 -*-
# 斌彬电脑
# @Time :   2018/8/10 0010    上午 9:42
'''
这里的内容是 按住 ctrl点 web 复制 25---》37行内容
'''

import tornado.ioloop             # pip install tornado
import tornado.web

class MainHandler(tornado.web.RequestHandler):
    def get(self):
        # self.write("Hello, world")
        self.render('form-1.html')      #  后台到前台  form-1.html

    def post(self, *args, **kwargs):        #  创建 post 方法
        print('用户名：', self.get_argument('user'))    #  后台 获取前台的信息
        self.write('登录成功')              #  交到前台，

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

Ajax

照上述代码

输入：http://127.0.0.1:8888/text

Ajax 前后台交互实例应用

前台代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1> json + JQ 实现 Ajax</h1>
    <input type="text" name="a">+
    <input type="text" name="b">=
    <input type="text" name="c">
    <button id="btn">计算</button>
</body>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script>
        var  $in = $('input');
        $('button').click(function(){
            var x = $in.eq(0).val();        // JQ 方法
//            var a = $in[0].valid;          // JS 方法
            var y = $in.eq(1).val();
            
            // JQ 里的 ajax 方法
            $.ajax({
                'type':'post',                 // 指定传送方法
                'url':'/text' ,                         // 传送位置
                'data':{
                    'a':x,
                    'b':y
                   },
                'success':function(data) {       // 回调函数
                    console.log(data);              //  后台传过来的数据
                    var c = data['res'];
                    $in.eq(2).val(c);
                }
             })
        });
    </script>
</html>

后台代码

import tornado.ioloop             # pip install tornado
import tornado.web

class MainHandler(tornado.web.RequestHandler):
    def get(self):
        # self.write("Hello, world")
        self.render('ajax+jq.html')      #  后台到前台  form-1.html

    def post(self, *args, **kwargs):        #  创建 post 方法
        # print( self.get_argument('a'))    #  后台 获取前台的信息
        # print( self.get_argument('b'))    #  后台 获取前台的信息
        # self.write('登录成功')              #  交到前台，
        a = self.get_argument('a')
        b = self.get_argument('b')
        c = float(a)+float(b)
        data = {'res':c}                #  前台要接收 json 这里要构造成为 json
        self.write(data)

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