大家已經發現了, 當我們點選submit提交form表單的時候, 他會重新整理一次, 如果不想它重新整理的話有下面兩種方法:

利用iframe

<form action="" method="post" target="the_iframe">  
    <input; type="text" id="id_input_text" name="the_input_text" />  
    <input type="submit" id="id_submit" name="the_submit" value="提交" />  
</form>  
<iframe id="is_iframe" name="the_iframe" style="display:none;"></iframe>
 

利用onsubmit事件

<form id="err_form" onsubmit="return post_data()">
	<input type="text" name="contact" name="address" autofocus="autofocus" placeholder="您的聯絡方式?" />
	<input type="text" name="title" maxlength="10" placeholder="10字以內的提要 (可不填)" />
	<textarea name="errmessage" required="required" maxlength="150" rows="7" placeholder="請輸入問題描述(必填,150字以內)"></textarea>
	<input type="submit" id="sub" value="提交" />
</form>
 

function post_data(){
	// ajax資料提交程式碼
	// .....

	return false;	//重要!一定要寫
}

<form id="err_form" onsubmit="post_data();return false;">
 

<form id="err_form">
	<input type="text" name="contact" name="address" autofocus="autofocus" placeholder="您的聯絡方式?" />
	<input type="text" name="title" maxlength="10" placeholder="10字以內的提要 (可不填)" />
	<textarea name="errmessage" required="required" maxlength="150" rows="7" placeholder="請輸入問題描述(必填,150字以內)"></textarea>
	<input type="submit" id="sub" value="提交" />
</form>

$(document).ready(function() {
	$('#err_form').submit(function() {	//這次我們這麼繫結
		var contact = $("input[name='contact']").val();
		var title = $("input[name='title']").val();
		var errmessage = $("textarea[name='errmessage']").val();				
		var err_data = {
			contact: contact,
			title: title,
			errmessage: errmessage
		}
		$.ajax({
			// ajax提交程式碼....
		});
			return false;	//還是要return false, 跟上面一樣的道理
	});
});