1. JQuery の紹介

jQuery は高速で簡潔な JavaScript フレームワークであり、一般的な機能コードを JavaScript にカプセル化し、シンプルな JavaScript デザインモードを提供し、HTML ドキュメント操作、イベント処理、アニメーションデザイン、および Ajax インタラクションを最適化します。

2. Ajax の紹介

Ajaxは「Asynchronous Javascript And XML」（非同期JavaScriptおよびXML）の略で、インタラクティブなWebアプリケーションを作成するためのWeb開発技術を指します。
Ajax = Asynchronous JavaScript and XML (Standard General Markup Language のサブセット)。
Ajax は、高速で動的な Web ページを作成するための手法です。
Ajax は、Web ページ全体をリロードせずに Web ページの一部を更新する手法です。
Ajax を使用すると、バックグラウンドでサーバーと少量のデータを交換することにより、Web ページを非同期的に更新できます。
これは、Web ページ全体をリロードしなくても、Web ページの一部を更新できることを意味します。
従来の Web ページ (Ajax を使用していない) では、コンテンツを更新する必要がある場合、Web ページ全体をリロードする必要があります。

3. 従来の Web アプリケーション開発モードと Ajax 開発モードの比較

この部分の参照: http://www.cnblogs.com/woniu123/p/5911284.html

1. 従来の Web アプリケーション開発モデル

Web の従来の開発モードでは、ユーザーがページ上で操作を行うたびに Web サーバーから HTTP 要求がトリガーされ、サーバーは対応する処理の後に HTML ページをクライアントに返します。（つまり、毎回ページを更新します）
ここに画像の説明を挿入

2. Ajax 開発モード

Ajax アプリケーションでは、ページでのユーザーの操作は、Ajax エンジンを介してサーバーと通信し、返された結果をクライアントの Ajax エンジンに送信します。次に、Ajax エンジンは、返されたデータをクライアントの指定された位置に挿入することを決定します。ページ。
ここに画像の説明を挿入

3. 比較まとめ

Web の従来の開発モード: ユーザーの行動ごとに、HTTP 要求が生成されます。
Web 用の Ajax 開発モデル: Ajax エンジンへの JavaScript 呼び出しになります。

4. 開発事例

1. HTML コード register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Register</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
    <div class="page-header">
        <h1>Example Register page header
            <small>Register Form</small>
        </h1>
    </div>
    <div class="panel panel-default">
        <div class="panel-body">
            <form>
                <div class="form-group">
                    <label for="username">Name</label>
                    <input type="text" class="form-control" id="username" placeholder="Name">
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" class="form-control" id="password" placeholder="Password">
                </div>
                <p>
                    <button type="button" class="btn btn-primary" id="signUp">Sign up</button>
                    <button type="button" class="btn btn-default">Sign in</button>
                </p>
            </form>
        </div>
    </div>
</div>

<!--弹出框-->
<div class="modal fade" id="msgModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">Message</h4>
            </div>
            <div class="modal-body">
                <p id="msg"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script src="register.js"></script>
</body>
</html>

2. JS コード register.js

$(function () {
    // 按钮单击时执行
    $("#signUp").click(function () {
        var username = $('#username').val();
        var password = $('#password').val();

        if (!checkParams({
            username: username,
            password: password
        })) {
            return false;
        }

        $.post("http://url/register",
            {
                username: username,
                password: password
            }, function (data) {
                if (data.errorCode === 0) {
                    msg('注册成功~');
                } else {
                    msg('注册失败:' + data.msg);
                }
            });
    });

    // 校验提交数据
    function checkParams(params) {
        if (!params.username) {
            msg('用户名不能为空~');

            return false;
        }
        if (!params.password) {
            msg('密码不能为空~');

            return false;
        }

        return true;
    }

    // 弹出框方法
    function msg(msg) {
        $('#msg').html(msg);
        $('#msgModal').modal({
            keyboard: false
        });
    }
});

3.ページ効果

ここに画像の説明を挿入

五、コードキー分析

1. JQuery は Input 入力値を取得します

HTML キーコード

<input type="text" class="form-control" id="username" placeholder="Name">
<input type="password" class="form-control" id="password" placeholder="Password">

JS キーコード

var username = $('#username').val();
 var password = $('#password').val();

原則: JQuery の Id セレクター
ユーザー名の入力入力ボックスの id="username" を使用し、JQuery の $('#username').val() を使用してその値を取得します; パスワードの入力入力ボックスの id
="password" 、JQuery の $('# password').val() を使用してその値を取得する;
# は Id セレクターを使用することを意味し、# の後ろのユーザー名は HTML 要素の ID 値に対応します

2.Ajaxリクエストサーバー