ajax提交數據，回調函數不執行或總是執行error回調函數的問題

 

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。