zoukankan      html  css  js  c++  java
  • 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";
    		}
    
    
    }
    
  • 相关阅读:
    第一章、web应用安全概论--web应用系统介绍--TCP/IP协议
    IIS配置导入导出
    shell习题第10题:打印每个单词的字数
    腾讯云的对象存储COS
    shell习题第9题:sed的常用用法
    shell习题第8题:监控nginx的502状态
    shell习题第7题:备份数据库
    shell习题第6题:监听80端口
    Python的math模块
    Python模块
  • 原文地址:https://www.cnblogs.com/zuo72/p/8250743.html
Copyright © 2011-2022 走看看