• 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";
    		}
    
    
    }
    
  • 相关阅读:
    java中子类与父类中隐含的this引用的分析
    c++中基类与派生类中隐含的this指针的分析
    c++中关于初始化型参列表的一些问题
    2014牡丹江网络zoj3816Generalized Palindromic Number(dfs或者bfs)
    2014牡丹江网络赛ZOJPretty Poem(暴力枚举)
    poj1949Chores(建图或者dp)
    poj 1950 Dessert(dfs枚举,模拟运算过程)
    java中自动装箱的问题
    hdu4292Food(最大流Dinic算法)
    codeforces Gargari and Permutations(DAG+BFS)
  • 原文地址:https://www.cnblogs.com/zuo72/p/8250743.html
Copyright © 2020-2023  润新知