ajax提交数据，回调函数不执行或总是执行error回调函数的问题

Posted 2020-10-06 ~驰~

 

jsp页面:

<form id="itemAddForm" class="itemForm" method="post"> 

<div id="tab1" class="tabcontent">
<div class="form">
<div class="form_row">
<label><b>标题:</b></label>
<input type="text" class="form_input" id="tite" name="tite" />
</div>

<div class="form_row">
<label><b>内容:</b></label>
<textarea class="form_textarea" id="content" name="content"></textarea>
</div>
<div class="form_row">
<input type="button" onclick="submitForm()" value="发布" />
<input type="button" onclick="clearForm()" value="重置" />
</div>
<div class="clear"></div>
</div>
</div>
</form>

<script type="text/javascript">
//提交表单
function submitForm(){
//同步文本框中的商品描述
itemAddEditor.sync();
//ajax的post方式提交表单
//$("#itemAddForm").serialize()将表单序列号为key-value形式的字符串
//alert($("#itemAddForm").serialize());

$.post("${pageContext.request.contextPath}/uc/content/saveCode",$("#itemAddForm").serialize(),function(data){

location.href="${pageContext.request.contextPath}/uc/findList";
},"json");/*这种方式提交不会执行回调函数*/
　　/* $.ajax({
　　type: "POST",
　　url: "${pageContext.request.contextPath}/uc/content/saveCode",
　　data: $("#itemAddForm").serialize(),
　　success: function(data){
　　alert(data.s);
　　},
　　error:function(data){
　　alert(data.s);
　　alert(22);
　　}
　　}); */          /*这种方式提交总是执行error回调函数*/
}

</script>

Controller类

 

@RequestMapping(value="/content/saveCode",method =RequestMethod.POST)
@ResponseBody
public Map<String,Integer> saveCode(UeditorCode uc){
uc.setId(UUID.randomUUID().toString());
uc.setCreated(new Date());//"yyyy-MM-dd"
uc.setUpdated(new Date());
ueditorCodeService.saveCode(uc);
Map<String,Integer> result = new HashMap<String,Integer>();
result.put("s", 200);
return result;
}

调试了一天终于找到原因了，希望下次记着。

原因:

用ajax提交表单数据，提交按钮要是写在form单内的话，提交方式必须要写成button不能写成submit，不然的话数据可以提交到后台但不会执行$.post()的回调函数或总是执行ajax的error回调函数。

总结:ajax提交表单数据，提交按钮最好写在表单外边，提交方式最好写成button不要写成submit。