ホームページ > ウェブフロントエンド > フロントエンドQ&A > インタラクションの前後で Ajax の重要なポイントについて簡単に説明しましょう

インタラクションの前後で Ajax の重要なポイントについて簡単に説明しましょう

WBOY
リリース: 2021-12-28 19:17:23
転載
1336 人が閲覧しました

この記事では、json、フロントとバックのインタラクションなど、ajax に関する関連知識を提供します。皆様のお役に立てれば幸いです。

インタラクションの前後で Ajax の重要なポイントについて簡単に説明しましょう

#パート 1: JSON の概要##
nbsp;html>
    <meta>
    <title>JSON</title><script>
    //定义一个JSON对象
    var obj = {
        "class":"数据结构",
        "name":66,
        "student":65
    };

    //可读性
    console.log(obj);
    console.log(obj.class);
    // 可写行
    obj.student = "学生真棒";
    console.log(obj.student);

    console.log(typeof obj);        //object  是一个json对象

    // JSON遍历
    for(var key in obj){
        console.log(key + ":" + obj[key]);
    }

    // JSON对象转字符串
    var obj1 = JSON.stringify(obj);
    console.log(typeof obj1);       //string
    // 字符串转JSON对象
    var obj2 = JSON.parse(obj1);
    console.log(typeof obj2);       //object</script>
ログイン後にコピー

効果の表示:

インタラクションの前後で Ajax の重要なポイントについて簡単に説明しましょうパート 2: 前後のインタラクション

1. 以下に、前後のインタラクションの 2 つの方法を示します:

(1)フォーム フロントエンドとバックエンドの対話を実行します

1:

ヒント:
import tornado.web

ソース コードを表示します。 26 ~ 38 行のトルネード バージョン Hello world! そのまま変更してください ~

HTML コード:
nbsp;html>
    <meta>
    <title>前后交互--form表单</title>
ログイン後にコピー
                用户名:
    密 码:
    

Python コード:

import tornado.webimport tornado.ioloopimport tornado.webclass MainHandler(tornado.web.RequestHandler):
    def get(self):
        self.render("Ajax_form.html")           #需要进行前后交互的HTML文件的路径
        
    def post(self, *args, **kwargs):        #此处的用post还是get取决于HTML文件中form表单的method属性(二者一样)
        #通过打印在控制台进行查看,有没有成功从前端拿到信息
        print(self.get_argument("user"))    #.get_argument()拿到的是单个的参数,里面参数是form表单里name属性的属性值。
        print(self.get_argument("pwd"))
        self.write("提交成功!")            if __name__ == "__main__":
    application = tornado.web.Application([
        (r"/", MainHandler),             #需要和form表单里的action一致。
    ])
    application.listen(8888)             #端口号   
    tornado.ioloop.IOLoop.current().start()
ログイン後にコピー

拡張子:
エラーの場合: NotImplementedError

この記事を読む: https://blog.csdn.net/hank5658/article/details/106870245

実装方法:

最初: .py ファイルを実行します
エラーが報告されなくなったら、HTML ファイルを実行します

次に、フロントエンド インターフェイスのアドレス バーを 127.0.0.1:8888 に変更し、Enter キーを押します
エラーは報告されず、転送は成功しました。
最後にユーザー名とパスワードを入力し、送信ボタンをクリックすると、pycharm コンソールにユーザー名とパスワードが表示されます。

# エフェクト表示:

インタラクションの前後で Ajax の重要なポイントについて簡単に説明しましょう

インタラクションの前後で Ajax の重要なポイントについて簡単に説明しましょう

## (2) AJAX Perform を使用するフロントエンドとバックエンドの相互作用インタラクションの前後で Ajax の重要なポイントについて簡単に説明しましょう

Ajax 関数?
    フロントエンドとバックエンドの対話にフォーム フォームを使用すると (従来の対話モード)、送信時にページ全体が更新されます。
  1. AJAX を使用すると、

    非同期読み込みが実行され、ページ全体が
    部分更新
    を再ロードせずにロードできることを前提としています。 Ajax とは何ですか?

    正式名は Ansync JavaScript and XML で、部分更新を備えた非同期読み込みテクノロジです。

  2. Ajax の使用方法?

    Ajax の使用方法は、ネイティブと jq (Jquery) の 2 種類に分けられます。ネイティブのものはあまり役に立たないので、以下では JQ について説明します。

  3. (1) Ajax の JQ バージョン:

  4. python コード:
import tornado.webimport tornado.ioloopimport tornado.webclass MainHandler(tornado.web.RequestHandler):
    def get(self):
        self.render("ajax_jquery.html")

    def post(self, *args, **kwargs):
        aaa = int(self.get_argument("aa"))
        bbb = int(self.get_argument("bb"))
        c = aaa + bbb        # 将后台处理过后的前端的数据回显到前端
        return_data = {"result":c}             #将需要传输的数据构造成JSON对象
        self.write(return_data)                #将后台需要传递给前端的数据回显给前端if __name__ == "__main__":
    application = tornado.web.Application([
        (r"/", MainHandler),
    ])
    application.listen(8880)             #端口号
    tornado.ioloop.IOLoop.current().start()
ログイン後にコピー

上記のエラーが報告される場合は、以下を追加しますコード :

# windows 系统下 tornado 使用 SelectorEventLoopimport platformif platform.system() == "Windows":
    import asyncio

    asyncio.set_event_loop_policy(asyncio.WindowsSelectorEventLoopPolicy())
ログイン後にコピー

HTML コード :

nbsp;html>
    <meta>
    <title>Ajax_jquery</title><h1>AJAX + JQUERY 实现前后交互</h1><input>+<input>=<input><button>计算</button><script></script>   <!--要用网址引用--><script>
    // 获取元素
    var ipt = $("input");
    var btn = $("#btn1");
    btn.click(function () {
        // 获取值
        var a = ipt.eq(0).val();        //eq是获取下标对应的标签;val()是得到该标签内用户输入的值
        var b = ipt.eq(1).val();
        // 使用JQ里面封装好的Ajax方法将前端的数据传输给后端
        $.ajax({
            "type":"post",   //数据传输的方式:post,get            "url":"/",       //提交的路径            "data":{         //键值对形式    传输的数据(需要传输到后台的数据)                "aa":a,
                "bb":b            },
            // 前后端成功之后的回调函数success   Ajax请求发送成功后,自动执行此函数            "success":function (data2) {        //callback==服务器write的数据
                x = data2["result"];
                ipt.eq(2).val(x);       //将回显的数据放进前端指定的位置            },
            // 失败之后的回调函数            "error":function (error) {
                console.log(error);
            }
        })
    })</script>
ログイン後にコピー

ざっくり言うと、同期と非同期:

同期: リクエスト送信後2 番目のリクエストを送信する前に、サーバーの応答が完了するまで待つ必要があります。サーバーの応答終了を待たずに他のリクエストを送信するとラグが発生します。 非同期: サーバーにリクエストを送信した後、他のリクエストを干渉することなく直接送信できます。部分的なリフレッシュが可能です。

エフェクト表示:

[関連チュートリアルの推奨事項:

AJAX ビデオ チュートリアルインタラクションの前後で Ajax の重要なポイントについて簡単に説明しましょう]

以上がインタラクションの前後で Ajax の重要なポイントについて簡単に説明しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:csdn.net
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート