1. Introduction to JQuery

jQuery is a fast and concise JavaScript framework, which encapsulates common functional codes in JavaScript, provides a simple JavaScript design mode, and optimizes HTML document operations, event processing, animation design and Ajax interaction.

2. Introduction to Ajax

Ajax stands for "Asynchronous Javascript And XML" (asynchronous JavaScript and XML), which refers to a web development technology for creating interactive web applications.
Ajax = Asynchronous JavaScript and XML (subset of Standard General Markup Language).
Ajax is a technique for creating fast and dynamic web pages.
Ajax is a technique for updating parts of a web page without reloading the entire web page.
Ajax enables web pages to be updated asynchronously by exchanging small amounts of data with the server in the background.
This means that parts of a webpage can be updated without reloading the entire webpage.
Traditional web pages (not using Ajax) must reload the entire web page if the content needs to be updated.

3. Comparison between traditional Web application development mode and Ajax development mode

Reference for this part: http://www.cnblogs.com/woniu123/p/5911284.html

1. Traditional Web application development model

In the traditional development mode of the Web, each operation of the user on the page will trigger an HTTP request from the Web server, and the server will return an HTML page to the client after corresponding processing. (i.e. refresh the page every time)
insert image description here

2. Ajax development mode

In the Ajax application, the user's operation on the page will communicate with the server through the Ajax engine, and then submit the returned result to the client's Ajax engine, and then the Ajax engine will decide to insert the returned data into the specified position on the page.
insert image description here

3. Comparative summary

The traditional development mode of the Web: For each user behavior, an HTTP request is generated.
The Ajax development model for the Web: it becomes a JavaScript call to the Ajax engine.

4. Development examples

1. HTML code 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 code 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. Page effect

insert image description here

Five, code key analysis

1. JQuery gets Input input value

HTML key code

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

JS key code

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

Principle: use JQuery's Id selector
username's input input box's id="username", use JQuery's $('#username').val() to get its value;
password's input input box's id="password" , use JQuery's $('#password').val() to get its value;
among them: # means to use the Id selector, and the username behind # corresponds to the id value of the HTML element

2. Ajax request server