使用jQuery實現Ajax非同步提交表單實現局部重新整理

jQuery學習筆記

提交form表單之後，不會重新整理頁面，而是局部重新整理，欲提交的form只要有id即可

如果使用get請求，注意中文亂碼問題，jquery會先使用iso8859-1解碼，然後發給伺服器，如果使用post請求，則直接將中文內容提交給伺服器解析。

使用jquery-1.4.2.js和jquery.form.js外掛程式。

如果建立新的js檔案中，需要加上

document.write("<script type='text/javascript' src='jquery-1.4.2.js'></script>")<br />document.write("<script type='text/javascript' src='jquery.form.js'></script>")

// 動態載入頁面<br />// id 顯示頁面的容器組件ID2<br />// url 欲載入頁面網址<br />// gop get請求還是post請求，預設get<br />function loadPage(id, url, gop) {<br />$("#" + id).addClass("loader");<br />$("#" + id).append("Loading......");<br />var type = (gop == "post" ? "post" : "get");<br />$.ajax( {<br /> type : type,<br /> url : url,<br /> cache : false,<br /> error : function() {<br /> alert('載入頁面' + url + '時出錯！')<br /> },<br /> success : function(content) {<br /> $("#" + id).empty().append(content);<br /> $("#" + id).removeClass("loader");<br /> }<br />});<br />}</p><p>// 局部提交表單<br />function formSubmit(formId, divId, url) {<br />$('#' + formId).submit(function() {<br /> $(this).ajaxSubmit( {<br /> target : '#' + divId,<br /> url : url,<br /> error : function() {<br /> alert('載入頁面' + url + '時出錯！')<br /> }<br /> });<br /> return false;<br />});<br />}<br />