1.使普通表单成为ajax提交方式的表单。
Name:
validType="remote['TestServlet','pname'] //remote['路径URL','参数名'],直接在Servlet获取,
//每输入一次,就发送一次AJAX请求
type="text" name="name" data-options="required:true" /> //必添项
Email:
type="text" name="email" data-options="validType:'email'" /> //添加类型
$("#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.用户名验证
Name:
validType="remote['TestServlet','pname'] //remote['路径URL','参数名'],直接在Servlet获取,
//每输入一次,就发送一次AJAX请求
type="text" name="name" data-options="required:true" /> //必添项
Email:
type="text" name="email" data-options="validType:'email'" /> //添加类型
提交
$("#btn").click(function() { //提交按钮 ,利用ajax来获取表格里面的数据
var r = $("#ff").form("validate"); //做表单字段验证，当所有字段都有效的时候返回true。
if(r) {
var o = $("#ff").serializeArray(); //序列表格内容为字符串,用于Ajax请求,
// console.log(o); 在控制台打印出来的话,显示的是Object,显示的是name,value值,空的
$.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";
}
}