Ajax 的基本使用-有解無憂

Ajax簡介

一門異步的加載技術，區域重繪
異步加載，可以在不多載整個網頁的前提下，進行區域重繪
分為原生和JQ兩種

JSON資料格式

Json物件轉字串： JSON.stringify()
字串轉Json物件：JSON.parse()

<script type="text/javascript">
    var obj = {"name": "JiYu", "age": "99"};
    //json資料 可讀可寫
    console.log(obj);
    console.log(typeof obj);
    console.log(obj.name);
    obj.name = "NianHua";
    console.log(obj);

    // json遍歷
    for (var key in obj) {
        console.log(key + ":" + obj[key])
    }

    // json物件轉字串
    var obj_string = JSON.stringify(obj);
    console.log(obj_string);
    console.log(typeof obj_string);

    // 字串物件轉json：鍵值對的引號必須是雙引號
    var obj_json = JSON.parse(obj_string);
    console.log(obj_json);
    console.log(typeof obj_json);
</script>

前后端資料互動

html檔案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前后端資料互動</title>
</head>
<body>
    <form action="/" method="post">
        用戶名：<input type="text" placeholder="請輸入用戶名" name="user"><br>
        密&emsp;碼：<input type="password" placeholder="請輸入密碼" name="pwd"><br>
        <input type="submit" value=https://www.cnblogs.com/jiyu-hlzy/p/"提交">

py檔案

import tornado.ioloop
import tornado.web


class MainHandler(tornado.web.RequestHandler):
    def get(self):
        self.render("Demo.html")
    def post(self):
        user = self.get_argument("user")
        pwd = self.get_arguments("pwd")
        print("用戶名：",user)
        print("密碼：",pwd)


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

Ajax區域重繪

匯入jquery
使用方式
- $.ajax({...})
- $.get({...})
- $.post({...})
html檔案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax區域重繪</title>
</head>
<body>

<input type="text" name="a">+
<input type="text" name="b">=
<input type="text" name="c"><br>
<button id="btn">計算</button>

<script src=https://www.cnblogs.com/jiyu-hlzy/p/"https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
    // 獲取元素
    var inp = $("input");
    var btn = $("#btn");
    btn.click(function () {
        // 獲取元素值
        var a = inp.eq(0).val();
        var b = inp.eq(1).val();
        // 方法一：ajax
        $.ajax({
            //get、post不用寫type'type': 'post',
            // 提交的地址
            'url': '/',
            // 傳給后臺的資料
            'data': {
                'aaa': a,
                'bbb': b
            },
            // 成功之后的回呼函式
            'success': function (data1) {
                res = data1['result'];
                inp.eq(2).val(res);
            }
        })
        // 方法二：get
        // $.get({});
        // 方法三：post
        // $.post({});
    })
</script>
</body>
</html>

py檔案

import tornado.ioloop
import tornado.web


class MainHandler(tornado.web.RequestHandler):
    def get(self):
        self.render("Demo.html")

    def post(self):
        # 根據鍵取前臺傳來的值
        a = int(self.get_argument('aaa'))
        b = int(self.get_argument('bbb'))
        result = a + b
        return_data = https://www.cnblogs.com/jiyu-hlzy/p/{'result':result}
        # 回傳資料
        self.write(return_data)


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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/25001.html

標籤：jQuery

上一篇：JQuery 輪播圖

下一篇：Web基礎了解版03-jQuery-$()-選擇器