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"; } }