前端jQuery发送Ajax异步请求

HTML代码：

<!--提交按钮-->
<div class="form-group">
    <label class="col-md-3 control-label"></label>
    <div class="col-md-8">
        <input id="btn-reg" class="btn btn-primary" type="button" value="立即注册" />
        <span class="pull-right">
            <small>已经有账号？</small><a href="login.html">登录</a>
        </span>
    </div>
</div>

JS代码：

<!--导入Cookie-->
<script src="../bootstrap3/js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>

$("#btn-login").click(function () {
    console.log($("#form-login").serialize())
    $.ajax({
        url: "/user/login",
        type: "POST",
        data: $("#form-login").serialize(),
        dataType: "json",
        success: function (json) {
            if (json.state == 200) {
                // alert("登录成功");
                $.cookie("avatar", json.data.avatar, {expires: 7})
                // 跳转
                location.href = "index.html";
            } else {
                alert("登录失败：" + json.msg);
            }
        },
        error: function (xhr) {
            alert("登录时产生了未知的错误异常：" + xhr.message);
        }
    });
});

页面加载后即执行：

$(document).ready(function () {
    $.ajax({
        url: "/user/get_by_id",
        type: "GET",
        data: $("#form-change-info").serialize(),
        dataType: "json",
        success: function (json) {
            if (json.state == 200) {

                $("#username").val(json.data.username)
                $("#phone").val(json.data.phone)
                $("#email").val(json.data.email)
                // $("#gender").val(json.data.gender)
                if (json.data.gender == 0) {
                    $("#gender-female").prop("checked", "checked")
                } else {
                    $("#gender-male").prop("checked", "checked")
                }


            } else {
                // alert("修改失败：" + json.msg);
            }
        },
        error: function (xhr) {
            // alert("修改时产生了未知的错误异常：" + xhr.status);
        }
    });
})

前端接收到Ajax的结果后，替换到页面上的JS代码：

$.ajax({
    url: "/product/hot_list",
    type: "GET",
    data: null,
    dataType: "json",
    success: function (json) {
        if (json.state == 200) {

            $("#hot-list").empty();

            let products = json.data;
            for (let i = 0; i < products.length; i++) {

                let div = "<div class=\"col-md-12\">\n" +
                    "    <div class=\"col-md-7 text-row-2\"><a href=\"product.html\">#{title}</a>\n" +
                    "    </div>\n" +
                    "    <div class=\"col-md-2\">#{price}</div>\n" +
                    "    <div class=\"col-md-3\"><img src=\"..#{image}collect.png\"\n" +
                    "                               class=\"img-responsive\"/></div>\n" +
                    "</div>"

                div = div.replace(/#{title}/g, products[i].title);
                div = div.replace(/#{price}/g, products[i].price);
                div = div.replace(/#{image}/g, products[i].image);

                $("#hot-list").append(div);
            }
        } else {
            alert("热销商品加载失败：" + json.msg);
        }
    },
    error: function (xhr) {
        alert("热销商品加载时产生了未知的错误异常：" + xhr.status);
    }
});

如何拿到网址地址处的key-value：

// http://localhost:8080/web/product.html?id=1001
let id=$.getUrlParam("id");

如果你的地址栏有很多的值：

// http://localhost:8080/web/orderConfirm.html?cids=6&cids=5
console.log(location.search.substr(1)); // cids=6&cids=5

前端要上传的数据的几种写法：

// 第一种
$("#form_id").serialize()

// 第二种
new FormData($("#form_id")[0]) // 只适用文件

// 第三种
"username=tom"

// 第四种
data:{
    "username":"tom"
    "age":18
}