1. Introducción a JQuery

jQuery es un marco JavaScript rápido y conciso, que encapsula códigos funcionales comunes en JavaScript, proporciona un modo de diseño JavaScript simple y optimiza las operaciones de documentos HTML, el procesamiento de eventos, el diseño de animaciones y la interacción Ajax.

2. Introducción a Ajax

Ajax significa "Javascript y XML asíncronos" (Javascript y XML asíncronos), que se refiere a una tecnología de desarrollo web para crear aplicaciones web interactivas.
Ajax = JavaScript asíncrono y XML (subconjunto del lenguaje de marcado general estándar).
Ajax es una técnica para crear páginas web rápidas y dinámicas.
Ajax es una técnica para actualizar partes de una página web sin recargar toda la página web.
Ajax permite que las páginas web se actualicen de forma asíncrona intercambiando pequeñas cantidades de datos con el servidor en segundo plano.
Esto significa que partes de una página web se pueden actualizar sin recargar toda la página web.
Las páginas web tradicionales (que no usan Ajax) deben recargar toda la página web si es necesario actualizar el contenido.

3. Comparación entre el modo de desarrollo de aplicaciones web tradicional y el modo de desarrollo Ajax

Referencia para esta parte: http://www.cnblogs.com/woniu123/p/5911284.html

1. Modelo tradicional de desarrollo de aplicaciones web

En el modo de desarrollo tradicional de la Web, cada operación del usuario en la página activará una solicitud HTTP desde el servidor Web, y el servidor devolverá una página HTML al cliente después del procesamiento correspondiente. (es decir, actualizar la página cada vez)
inserte la descripción de la imagen aquí

2. Modo de desarrollo Ajax

En la aplicación Ajax, la operación del usuario en la página se comunicará con el servidor a través del motor Ajax y luego enviará el resultado devuelto al motor Ajax del cliente, y luego el motor Ajax decidirá insertar los datos devueltos en la posición especificada en la página.
inserte la descripción de la imagen aquí

3. Resumen comparativo

El modo de desarrollo tradicional de la Web: Para cada comportamiento del usuario, se genera una solicitud HTTP.
El modelo de desarrollo Ajax para la Web: se convierte en una llamada JavaScript al motor Ajax.

4. Ejemplos de desarrollo

1. código HTML registro.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. Código JS registro.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. Efecto de página

inserte la descripción de la imagen aquí

Cinco, análisis de clave de código

1. JQuery obtiene el valor de entrada de entrada

código clave HTML

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

Código clave JS

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

Principio: use el selector de Id de JQuery
, el nombre de usuario, el id del cuadro de entrada = "nombre de usuario"
, use JQuery $ (' # nombre de usuario'). password').val() para obtener su valor;
entre ellos: # significa usar el selector de Id, y el nombre de usuario detrás de # corresponde al valor de id del elemento HTML

2. Servidor de solicitudes Ajax