今天照葫芦画瓢学着使用ajax,
前端代码如下:
<form id="form1" >
<table width="90%" class="tab2" align="center">
<tr>
<td align="right">用户名:</td>
<td><input type="text" value="" name="username" id="username" class="input5" />
<font class="font_blue">*</font></td>
<td>
</tr>
<tr>
<td align="right">登录密码:</td>
<td><input type="text" value="" class="input7" name="password" id="password"/>
<font class="font_blue">*</font></td>
<td>
</tr>
<tr>
<td align="right">重复输入密码:</td>
<td><input type="text" value="" name="rePassword" id="rePassword" class="input7" />
<font class="font_blue">*</font></td>
<td>
</tr>
<tr>
<td align="right">电子邮箱:</td>
<td><input type="text" value="" name="email" id="email" class="input4" />
<font class="font_blue">*</font></td>
<td>
</tr>
<tr>
<td align="right">手机号码:</td>
<td><input type="text" value="" name="phone" id="phone" class="input4" /></td>
<td>
</tr>
</table>
<div class="button4">
<input type="button" class="button6" id="submit"/>
<input type="reset" class="button5" value="重置" />
</div>
</form>
<script>
$(function () {
var data ={
username:'$("#username").val()',
password:'$("#password").val()',
rePassword:'$("#rePassword").val()',
email:'$("#email").val()',
phone:'$("#phone").val()'
};
$('#submit').click(function () {
$.ajax({
type:"POST",
url:"/register/function",
data:data,
dataType:"json",
contentType: 'application/json',
success:function (data) {
}
})
})
})
</script>
后台代码是以JSON格式接收的,代码如下:
@PostMapping("/register/function")
public String register(@Valid @RequestBody RegisterForm registerForm){
if(registerForm.getPassword().isEmpty()){
String massage="密码不能为空";
}
return "redirect:/index";
}
public class RegisterForm {
private String username;
private String password;
private String rePassword;
private String email;
private String phone;
...
}
然后一直报405错误,后台提示JSON转换失败,报错内容如下:
Resolved [org.springframework.http.converter.HttpMessageNotReadableException:
JSON parse error: Unrecognized token 'username': was expecting
(JSON String, Number, Array, Object or token 'null', 'true' or 'false');
nested exception is com.fasterxml.jackson.core.JsonParseException:
Unrecognized token 'username': was expecting
(JSON String, Number, Array, Object or token 'null', 'true' or 'false')
at [Source: (PushbackInputStream); line: 1, column: 10]]
后来请教了前端大佬,发现是ajax在传参数的时候没有转成String,原来传送的data传的是一个JSON对象
把data转成字符串就可以了
<script>
$(function () {
var data ={
username:'$("#username").val()',
password:'$("#password").val()',
rePassword:'$("#rePassword").val()',
email:'$("#email").val()',
phone:'$("#phone").val()'
};
$('#submit').click(function () {
$.ajax({
type:"POST",
url:"/register/function",
data:JSON.stringify(data), //JSON对象转成Json字符串
dataType:"json",
contentType: 'application/json',
success:function (data) {
}
})
})
})
</script>
笔记:
data:{"name":name,"sex":sex},
data的值是一个对象
data:"{\"name\":\""+name+"\",\"sex\":\""+sex+"\"}",
data的值是一个字符串
另外,使用ajax时,form标签中就不要写action了,提交按钮的type也不能用submit了(即不要用type=“submit”),要改成普通的button(即type=“button”)
另外,大佬不推荐使用$ajax,他推荐使用axios
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
于是,我上面的那种传参方式可以改写成:
<script>
$(function () {
var data ={
username:'$("#username").val()',
password:'$("#password").val()',
rePassword:'$("#rePassword").val()',
email:'$("#email").val()',
phone:'$("#phone").val()'
};
$('#submit').click(function () {
//get方法
axios.get("/register/function", data).then(function(res) {
console.log('then', res);
}).catch(function(res) {
console.log('catch', res);
});
//post方法,url不带参数aaa
axios.post("/register/function", data, {}).then(function(res) {
console.log('then', res);
}).catch(function(res) {
console.log('catch', res);
});
//post方法,url后带参数aaa
axios.post("/register/function", data, {params: {
aaa:1,
}
}).then(function(res) {
console.log('then', res);
}).catch(function(res) {
console.log('catch', res);
});
})
})
</script>