ajax提交form表單資料詳細匯總


一、ajax提交form表單和不同的form表單的提交主要區別在於,ajax提交表單是異步提交的,而普通的是同步提交的表單。通過在后台與服務器進行少量數據交換,ajax 可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下,對網頁的某部分進行更新。傳統普通的網頁(不使用ajax)如果需要更新內容,必須重載整個網頁頁面。

二、通過ajax提交form實現的登錄實例:

<body>
		<h1 align="center">用戶登錄</h1>
		<div align="center" style="font-size: 20px;">
	        <form id="loginForm" name="loginForm" action="${pageContext.request.contextPath}/user/login" method="post">
	          <table  align="center">
					  <tr>
					    <td>用戶名:</td>
					    <td colspan="2"><input type="text" name="username" id="username" /></td>
					  </tr>
					  <tr>
					    <td>密  碼:</td>
					    <td colspan="2"><input type="password" name="password" id="password" /></td>
					  </tr>
					    <td colspan="3" align="center">
					    	<input id="login_submit_button" type="button" value="登錄"  onclick=<span style="color:#ff00;">"loginSubmit</span>(this.form);" />
					    </td>
					  </tr>
				</table>
        	</form>
        </div>
        <div align="center" style="padding:30px;font-size: 15px;">
        	<span style="color: red;">注意:</span>
        	<span  style="color: blue;">
        		只有登錄用戶才可以上傳圖片。
        	</span>
        </div>
 </body>

  

<head>
		<title>用戶登錄</title>
		<script src="${pageContext.request.contextPath}/js/jquery-1.4.min.js" type="text/javascript"></script>
	</head>
	<script type="text/javascript">
		function loginSubmit(form) {
				$.ajax( {
					type : "POST",
					url : "${pageContext.request.contextPath}/user/login",
					data : $("#loginForm")<span style="color:#ff00;">.serialize</span>(),
					success : function(msg) {
						if ((msg == "true")) {
							alert("登錄成功。");
							window.location.href = "${pageContext.request.contextPath}/add_user";
						} else {
							if(msg=="false"){
								alert("登錄失敗。");
							}
						}
					}
				});	
			
	}
	</script>

  三、部分ajax提交form表單實例:

$.ajax({
				cache: true,
				type: "POST",
				url:ajaxCallUrl,
				data:$('#yourformid').serialize(),// 你的formid
				async: false,
			    error: function(request) {
			        alert("Connection error");
			    },
			    success: function(data) {
				    $("#commonLayout_appcreshi").parent().html(data);
			    }
			});

  四、ajax提交表單可以分為兩種,一種是無返回結果的,就是將表單數據提交給后台,后台處理完就完了;另一種就是有返回結果的,后台執行成功或失敗的信息需要返回到前台。


   1,無返回結果的
   最簡單的就是$("#formid").submit();直接將form表單提交到后台。


   2,有返回結果的
   這種方式是使用最多的一種,因為程序的執行成功與否都需要給用戶提示,程序一般也都是多步完成的,執行完插入操作,需要發起流程,這就需要在界面上判斷成功與否。
   ajax本身屬於有返回結果的一類,其中的success方法就是處理后台返回結果的。
   ajax提交表單有返回結果的有兩種實現方式:


  1)將form表單數據序列化

<span style="font-size:18px;">  $.ajax({
	type: "POST",
	url:your-url,
	data:$('#yourformid').serialize(),
	async: false,
	error: function(request) {
		alert("Connection error");
	},
	success: function(data) {
		//接收后台返回的結果
	}
  });</span>

  這種方式需要注意的是form表單中的項一定要有name屬性,后台獲取的鍵值對為key=name值,value=各項值,注意無論是input標簽還是span或者是其他標簽,一定要有name屬性,沒有name屬性后台是獲取不到該項的


   2)通過窗口查找form提交

<span style="font-size:18px;">  // 提交表單
  var obj = document.getElementById("xx_iframe").contentWindow;
  obj.$("#yourform").form("submit",{
	success :function(data){
		//對結果處理
	}

  });</span>

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM