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格式的形式发送数据的方法啦 （一般用于前后分离）
想学习的小伙伴们快快行动起来把！