Html 以 Form 表单的形式 发送 POST （JSON格式） 的数据

Html 以 Form 表单的形式 发送 POST （JSON格式） 的数据

这种问题无需多说，直接上代码：

<script type="text/javascript">
        function login() {
            var username = document.getElementById("username").value;
            var password = document.getElementById("password").value;
            $.ajax({
                type: "POST",
                dataType: "json",
                url: '/user/login',
                contentType: "application/json",
                data:JSON.stringify({
                    "userName": username,
                    "passWord": password
                }),
                success: function (result) {
                    console.log("data is :" + result)
                    if (result.code == 200) {
                        alert("登陆成功");
                        window.location.href = "../home/home_page.html";
                    }else {
                        alert(result.message)
                    }
                }
            });
        }
    </script>

<form action="" id="loginForm" class="fh5co-form animate-box" onsubmit="return false" method="post"
                  data-animate-effect="fadeInLeft">
                <h2>Sign In</h2>
                <div class="form-group">
                    <label for="username" class="sr-only">Username</label>
                    <input type="text" class="form-control" id="username" name="userName" placeholder="Username"
                           autocomplete="off">
                </div>
                <div class="form-group">
                    <label for="password" class="sr-only">Password</label>
                    <input type="password" class="form-control" id="password" name="passWord" placeholder="Password"
                           autocomplete="off">
                </div>
                <div class="form-group">
                    <label for="remember"><input type="checkbox" id="remember"> Remember Me</label>
                </div>
                <div class="form-group">
                    <p>Not registered? <a href="sign-up2.html">Sign Up</a> | <a href="forgot2.html">Forgot Password?</a>
                    </p>
                </div>
                <div class="form-group">
                    <input type="button" onclick="login()" value="Sign In" class="btn btn-primary">
                </div>
            </form>

这里需要注意几点：

1. var username = document.getElementById(“username”).value;
   var password = document.getElementById(“password”).value;
   中的 username、password 在Form 表单中 一定要以 id 的形式写出来，并且字段名必须一模一样，这样在script 中才可以渠道Form 表单传入的值

2. url: ‘/user/login’, 即为你的跳转的路径

3. type: “POST”, 即 POST、GET 方式，这里采用的POST的方式

4. dataType: “json”, JSON格式

5. contentType: “application/json”, contentType 主要设置你发送给服务器的格式

6. data:JSON.stringify({
   “userName”: username,
   “passWord”: password
   }),
   这里一定要注意一下：有些小伙伴， 将 dataType 设置为 JSON 格式 ，以为就可以以JSON的格式将参数发送出去，其还不然，那个只是确定数据的格式，但是真正的数据格式是怎样的，还需要这段儿代码来进行设置，

7. success: function (result) {} ：result 即 接口返回来的结果值，在花括号里你就可以进行你的一系列的业务操作啦

以上就是从 Form表单中 获取值，并且以POST格式的形式发送数据的方法啦 （一般用于前后分离）
想学习的小伙伴们快快行动起来把！