页面代码如下
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<link rel="stylesheet" href="practice/css/register.css" />
</head>
<body>
<div class="container">
<div class="register-wrapper">
<div class="head">注册</div>
<form method="post" name ="form" id="form" class="form-wrqpper">
<input class="input-item" type="text" id="username" name="username" placeholder="请输入账号"/>
<input class="input-item" type="password" id="password" name="password" placeholder="请输入密码"/>
<input class="input-item" type="password" name="repassword" id="repassword" placeholder="请再次确认密码"/>
<input class="input-item" type="text" id="phon" name="phon" placeholder="请输入电话号码"/>
<input class="input-item" type="text" id="name" name="name" placeholder="请输入你的姓名"/>
<input class="input-item" type="text" id="eamil" name="eamil" placeholder="请输入你的邮箱"/>
<select id="sex" name="sex" class="input-item">
<option>---请选择你的性别---</option>
<option>男</option>
<option>女</option>
</select>
<input type="submit" class="sub" value="注册" onclick="register()"/>
</form>
<div class="msg">
已有账号？<a href="Login.html">登录</a>
</div>
Ajax代码如下：
function register() {
var username=$("#username");
var password=$("#password");
var repassword=$("#repassword");
var phon=$("#phon");
var name=$("#name");
var eamil=$("#eamil");
var sex=$("#sex");
alert("123");
$.ajax({
url:"user/register",
type:"post",
data:JSON.stringify({
username:username,
password:password,
repassword:repassword,
phon:phon,
name:name,
eamil:eamil,
sex:sex
}),
contentType:"application/json;charset=utf-8",
dataType:"json",
success:function (data) {
var user=data;
if (user>0){
alert("注册成功");
window.location.href="Login.html";
}else {
alert("注册失败");
}
},
error:function (XMLHttpRequest) {
alert("error"+XMLHttpRequest.responseText);
}
})
}
```javascript
error错误如下
error<html><head><title>Apache Tomcat/7.0.37 - Error report</title><style><!--H1 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:22px;} H2 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:16px;} H3 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:14px;} BODY {font-family:Tahoma,Arial,sans-serif;color:black;background-color:white;} B {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;} P {font-family:Tahoma,Arial,sans-serif;background:white;color:black;font-size:12px;}A {color : black;}A.name {color : black;}HR {color : #525D76;}--></style> </head><body><h1>HTTP Status 400 - </h1><HR size="1" noshade="noshade"><p><b>type</b> Status report</p><p><b>message</b> <u></u></p><p><b>description</b> <u>The request sent by the client was syntactically incorrect.</u></p><HR size="1" noshade="noshade"><h3>Apache Tomcat/7.0.37</h3></body></html>
// 明显错误
var username=$("#username");
var password=$("#password");
var repassword=$("#repassword");
var phon=$("#phon");
var name=$("#name");
var eamil=$("#eamil");
var sex=$("#sex");
// 正确写法
var username=$("#username").val();
var password=$("#password").val();
var repassword=$("#repassword").val();
var phon=$("#phon").val();
var name=$("#name").val();
var eamil=$("#eamil").val();
var sex=$("#sex").val();
原因：
1）前端提交数据的字段名称或者是字段类型和后台的实体类不一致 或 前端提交的参数跟后台需要的参数个数不一致，导致无法封装；
2）前端提交的到后台的数据应该是json字符串类型，而前端没有将对象转化为字符串类型；
解决方案：
1）对照字段名称，类型保证一致性
2）使用stringify将前端传递的对象转化为字符串 data: JSON.stringify(param) ;
function register() {
var username=$("#username").val();
var password=$("#password").val();
var repassword=$("#repassword").val();
var phon=$("#phon").val();
var name=$("#name").val();
var eamil=$("#eamil").val();
var sex=$("#sex").val();
alert("123");
$.ajax({
url:"user/register",
type:"post",
data:JSON.stringify({
username:username,
password:password,
repassword:repassword,
phon:phon,
name:name,
eamil:eamil,
sex:sex
}),
contentType:"application/json;charset=utf-8",
dataType:"json",
success:function (data) {
var user=data;
if (user>0){
alert("注册成功");
window.location.href="Login.html";
}else {
alert("注册失败");
}
},
error:function (XMLHttpRequest) {
alert("error"+XMLHttpRequest.responseText);
}
})
}