<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<link href="bootstrap-4.3.1-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="bootstrap-4.3.1-dist/js/bootstrap.js"></script>
<script src="js/vue.js"></script>
<!-- 异步提交的库 -->
<script src="js/vue-resource.min.js"></script>
<style>
.container {
margin-top: 15%;
35%;
}
.btn-primary {
background-color: #337ab7;
border-color: #337ab7;
}
.form-control {
margin-bottom: 4px;
}
</style>
</head>
<body>
<div class="container">
<form id="form">
<div class="form-signin">
<!--<h2 class="form-signin-heading">注册</h2>-->
<!-- class="sr-only"将label标签隐藏 -->
<label for="exampleInputUsername" class="sr-only">用户名</label>
<!-- 会忽略所有表单元素的value、checked、selected特性的初始值,而总是将Vue实例的数据作为数据来源 -->
<input type="text" class="form-control" v-model="formObj.username" id="exampleInputUsername" name="username"
placeholder="用户名">
<label for="exampleInputUsername" class="sr-only">密码</label>
<input type="password" class="form-control" v-model="formObj.password" id="exampleInputPassword"
name="password"
placeholder="密码">
<label for="exampleInputUsername" class="sr-only">邮箱</label>
<input type="email" class="form-control" v-model="formObj.email" id="exampleInputEmail" name="email"
placeholder="邮箱">
<label for="exampleInputUsername" class="sr-only">手机</label>
<input type="tel" class="form-control" v-model="formObj.phone" id="exampleInputPhone" name="phone"
placeholder="手机">
<div class="checkbox">
<label>
<!--<input type="checkbox">
记住密码-->
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" onclick="ajaxRegister()" type="button">注册
</button>
</div>
</form>
</div>
</body>
<script>
function ajaxRegister() {
var param = new FormData(document.getElementById("form"));
param = convert_FormData_to_json(param);
console.log(param);
Vue.http.post("/register", param).then(function (res) {
console.log(res.bodyText);
}, function (res) {
console.log(res.status);
});
return false;
}
/**
* 将formData数据转为JSON格式
* @param formData
*/
var convert_FormData_to_json = function (formData) {
var objData = {};
for (var entry of formData.entries()) {
objData[entry[0]] = entry[1];
}
return JSON.stringify(objData);
}
</script>
</html>