直到今天,才发现JQuery原来有个Form表单插件,而且还是无刷新页面提交表单,看来自己还要多加强学习啊!不多说了,直接贴代码吧,代码比较简单!
Servlet代码:
packagecom.project.servlet;
importjava.io.IOException;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
publicclassAjaxFormServletextendsHttpServlet{
publicAjaxFormServlet(){super();}
publicvoiddestroy(){super.destroy();}
publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{
this.doPost(request,response);
}
publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{
//Stringparam=request.getParameter("txt");
Stringparam1=request.getParameter("txt1");
Stringparam2=request.getParameter("txt2");
System.err.println("参数1的值:param1="+param1+",参数2的值:param2="+param2);
response.setContentType("applicationContext/JSON,encoding=utf-8");
response.getWriter().write("{\"msg\":\"HelloWold\"}");
}
publicvoidinit()throwsServletException{}
}
页面代码:
Stringpath=request.getContextPath();
StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
HTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
">
首页
$(document).ready(function(){
varoptions={
type:"POST",//请求方式:get或post
dataType:"json",//数据返回类型:xml、json、script
beforeSerialize:function(){
//alert("表单数据序列化前执行的操作!");
//$("#txt2").val("java");//如:改变元素的值
},
//data:{'txt':"JQuery"},//自定义提交的数据
beforeSubmit:function(){
//alert("表单提交前执行的操作!");
//if($("#txt1").val()==""){returnfalse;}//如:验证表单数据是否为空
},
success:function(json){//表单提交成功回调函数
alert("表单操作完成!操作结果:"+json.msg);
},
error:function(err){
alert("表单提交异常!"+err.msg);
}
};
$("#form").ajaxForm(options);
});
好了,到此结束,是不是很Easy!
注:在操作时遇到一个很诡异的情况,就是由于我的浏览器问题,后台总是无法接收到参数,其他人访问正常,所以请采用两种浏览器多试试,以免遇到类似的问题,花费自己不必要的时间!