[Jquery]Jquery AJAX post提交json示例

编程知识行业动态更新时间:2024-06-13 00:21:04

下面是html请求web服务器api接口的示例，是post发送json方式请求。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script src="~/lib/jquery-3.3.1/jquery-3.1.1.js"></script>
    <script src="~/lib/jquery-3.3.1/jquery-3.1.1.min.js"></script>
</head>
<body>

    <fieldset>
        <legend>身份验证</legend>
        <form id="login_form">
            <label for="UserName">用户名:</label><input type="text" name="userName" id="userName" value="admin" />
            <br />
            <br />
            <label for="Password">密码:</label><input type="password" name="password" id="password" value="123" />
            <br />
            <br />
        </form>
        <button id="login">登录</button>
    </fieldset>
    <script>
        $(function () {
            $("#login").on("click", function () {
                 方法一：定义json数据对象
                //var userName = $("#userName").val();
                //var password = $("#password").val();
                //var opt = { "userName": userName, "password": password };
                //方法二：serializeArray() 但是数组对象
                var fields = $('#login_form').serializeArray();
                var obj = {}; //声明一个对象
                $.each(fields, function (index, field) {
                    obj[field.name] = field.value; //通过变量，将属性值，属性一起放到对象中
                })
                $.ajax({
                    url: "http://localhost:8089/api/Home",
                    //data: JSON.stringify(opt), //方法一 测试ok
                    data: JSON.stringify(obj), //方法二   测试ok
                    method: "post",
                    dataType: "json",
                    contentType: 'application/json',
                    success: function (data) {
                        console.log(data)
                        if (data.success) {
                            //为简单起见，将token保存在全局变量中。
                            window.token = data.token;
                            alert("登录成功");
                        } else {
                            alert("登录失败:" + data.message);
                        }
                    }
                });
            });
        });
    </script>
</body>
</html>