潭州課堂25班：Ph201805201 WEB 之 Ajax第八課 (課堂筆記)

時間 2019-11-11

標籤課堂 ph201805201 web ajax 第八筆記欄目 HTML 简体版

原文原文鏈接

js 《——》jqcss

<!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 特殊選擇器html

<!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 python

<!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>

jsonjquery

<!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 表單web

先後臺的交互，ajax

前臺代碼　　命名爲‘form-1.htmljson

<!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.pyapp

# -*- 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函數

照上述代碼tornado

輸入：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()

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。