easyui 里面如何高效的用Ajax 提交表單

   1.使普通表單成為ajax提交方式的表單。

　　　　

<form id="ff" method="post">
		<div>
			<label for="name">Name:</label> 
			<input class="easyui-validatebox" 
			validType="remote['TestServlet','pname']  //remote['路徑URL','參數名'],直接在Servlet獲取,
			 //每輸入一次,就發送一次AJAX請求
				type="text" name="name" data-options="required:true" />  //必添項
		</div>
		<div>
			<label for="email">Email:</label> 
			<input class="easyui-validatebox"
				type="text" name="email" data-options="validType:'email'" />  //添加類型
		</div>
	</form>
	<a id="btn" href="javascript:void(0)">提交</a> 

 

	$("#ff").form({		
		url:"TestServlet",
		onSubmit:function() {   //在提交之前觸發，返回false可以終止提交。
			var r = $("#ff").form("validate");  //做表單字段驗證，當所有字段都有效的時候返回true。
			console.log(r);     
			return r;
		},
		success:function(data) {
			var o = eval("("+data+")");		 //解析字符串,此方法不怎么使用	
			alert(o.result);    
		}		
	}); 

 

2.用戶名驗證

 

<form id="ff" method="post">
		<div>
			<label for="name">Name:</label> 
			<input class="easyui-validatebox" 
			validType="remote['TestServlet','pname']  //remote['路徑URL','參數名'],直接在Servlet獲取,
			 //每輸入一次,就發送一次AJAX請求
				type="text" name="name" data-options="required:true" />  //必添項
		</div>
		<div>
			<label for="email">Email:</label> 
			<input class="easyui-validatebox"
				type="text" name="email" data-options="validType:'email'" />  //添加類型
		</div>
	</form>
	<a id="btn" href="javascript:void(0)">提交</a> 

 

$("#btn").click(function() {   //提交按鈕 ,利用ajax來獲取表格里面的數據	   		
		
		var r = $("#ff").form("validate");    //做表單字段驗證，當所有字段都有效的時候返回true。
		
		if(r) {
			var o = $("#ff").serializeArray(); //序列表格內容為字符串,用於Ajax請求,   
			// console.log(o);  在控制台打印出來的話,顯示的是Object,顯示的是name,value值,空的<input>   
			$.ajax({
				url:"TestServlet",
				type:"post",
				data:o,  //在Servlet里面直接獲取的便就是這個o
				dataType:"json",
				success:function(data) {
					alert(data.result);
				},
				error:function() {
					
				}
			});
		} else {
			alert("error");
		}
		
		
	}); 

 

TestServlet

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setCharacterEncoding("utf-8");
				String name = request.getParameter("name");
		String email = request.getParameter("email");
		String pname = request.getParameter("pname");
		
		/*System.out.println(name);
		System.out.println(email);
		System.out.println(pname);   看一下獲取的是什么 */   
		//response.getWriter().append("{\"result\":\"already receive\"}");  彈出一個對話框
		 String result = "";
		if(pname.equals("zibohanqi")) {   //獲取pname,進行驗證
			result = "true";
		} else {
			result = "false";
		}


}