今天在做一个留言系统时，为让留言不用刷新页面显示，使用了ajax前后台交互，结果返回时总是在error函数中
原因：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>创建留言</title>
<script type="text/javascript" src="../js/jQuery/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
function saveMessage(){
var content = $("textarea").val();
$.ajax({
dataType:"json",
type:"POST",
url:"saveMessage.action",
data:{content:content},
success:function(data){
if(data.config){
$('#message').append(content);
}
},error:function(data){
alert(data);
}
});
}
</script>
</head>
<body>
<center>
用户${user.uphone}你好
<br/>
如有问题请给我们留言，我们将在这里进行回复
<hr/>
<div>
<!-- 这里 -->
<form method="post"><table>
<tr><td><textarea rows="3" cols="60" name="content" ></textarea></td></tr>
<tr><td><button name="submit" onclick="saveMessage()">留言</button></td></tr>
</table>
</form>
</div>
<div>
<div id="message" color="blue" width="18px"></div>
<hr/>
<c:forEach items="${messages }" var="message">
<font color="red">${message.content }</font><br/>
</c:forEach>
</div>
</center>
</body>
</html>
原来的前台源码如上，
@RequestMapping(value="/saveMessage")
@ResponseBody
private Map<String, Object> saveMessage(Message message,HttpSession httpSession){
//将登陆的用户信息取出放进message表内，将留言信息与用户相互关联
User user = (User)httpSession.getAttribute("user");
message.setUser(user);
boolean config=messageService.saveMessage(message);
Map<String, Object> map = new HashMap<String, Object>();
map.put("config",config);
return map;
}
这是后台接收的方法
原因是前台使用了<form>表单，修改后前台代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>创建留言</title>
<script type="text/javascript" src="../js/jQuery/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
function saveMessage(){
var content = $("textarea").val();
$.ajax({
dataType:"json",
type:"POST",
url:"saveMessage.action",
data:{content:content},
success:function(data){
if(data.config){
$('#message').append(content);
}
},error:function(data){
alert(data);
}
});
}
</script>
</head>
<body>
<center>
用户${user.uphone}你好
<br/>
如有问题请给我们留言，我们将在这里进行回复
<hr/>
<div>
<!-- 修改了这里 -->
<table><tr><td><textarea rows="3" cols="60" name="content" ></textarea></td></tr>
<tr><td><button name="submit" onclick="saveMessage()">留言</button>
</td></tr>
</table>
</div>
<div>
<div id="message" color="blue" width="18px"></div>
<hr/>
<c:forEach items="${messages }" var="message">
<font color="red">${message.content }</font><br/>
</c:forEach>
</div>
</center>
</body>
</html>
只是将<form>表单给去掉了，然后就解决了
在实现ajax刷新页面时，用<form>表单会实现一次跳转，而在同页面显示时不需要跳转，拥有<form>表单时一般用于登陆验证。
可能还有其他原因，欢迎大家指正，共同进步