使用jquery.form.js实现form表单无刷新提交简单示例
2014-04-16 00:00
1151 查看
直到今天,才发现JQuery原来有个Form表单插件,而且还是无刷新页面提交表单,看来自己还要多加强学习啊!不多说了,直接贴代码吧,代码比较简单!
Servlet代码:
页面代码:
好了,到此结束,是不是很Easy!
注:在操作时遇到一个很诡异的情况,就是由于我的浏览器问题,后台总是无法接收到参数,其他人访问正常,所以请采用两种浏览器多试试,以免遇到类似的问题,花费自己不必要的时间!
Servlet代码:
package com.project.servlet; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class AjaxFormServlet extends HttpServlet { public AjaxFormServlet() {super();} public void destroy() {super.destroy();} public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //String param = request.getParameter("txt"); String param1 = request.getParameter("txt1"); String param2 = request.getParameter("txt2"); System.err.println("参数1的值:param1="+param1+",参数2的值:param2="+param2); response.setContentType("applicationContext/JSON,encoding=utf-8"); response.getWriter().write("{\"msg\":\"Hello Wold\"}"); } public void init() throws ServletException {} }
页面代码:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>首页</title> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="js/jquery.form.js"></script> </head> <body> <form name="form" id="form" action="AjaxFormServlet" method="POST"> <input type="text" name="txt1" id="txt1" value="Hello"> <input type="text" name="txt2" id="txt2" value="World" > <input type="submit" value="提交"> </form> </body> <script type="text/javascript"> $(document).ready(function(){ var options = { type:"POST",//请求方式:get或post dataType:"json",//数据返回类型:xml、json、script beforeSerialize:function(){ //alert("表单数据序列化前执行的操作!"); //$("#txt2").val("java");//如:改变元素的值 }, //data:{'txt':"JQuery"},//自定义提交的数据 beforeSubmit:function(){ //alert("表单提交前执行的操作!"); //if($("#txt1").val()==""){return false;}//如:验证表单数据是否为空 }, success:function(json){//表单提交成功回调函数 alert("表单操作完成!操作结果:"+json.msg); }, error:function(err){ alert("表单提交异常!"+err.msg); } }; $("#form").ajaxForm(options); }); </script> </html>
好了,到此结束,是不是很Easy!
注:在操作时遇到一个很诡异的情况,就是由于我的浏览器问题,后台总是无法接收到参数,其他人访问正常,所以请采用两种浏览器多试试,以免遇到类似的问题,花费自己不必要的时间!
相关文章推荐
- 使用jquery.form.js实现form表单无刷新提交简单示例
- 使用jquery.form.js 进行表单提交,通过回调函数实现页面互动
- Play FrameWork 使用jquery.form.js实现无刷新提交带文件的表单
- jQuery使用ajaxSubmit()提交表单示例==引入jquery.form.js插件(专门提交表单)
- 使用jquery.form.js 进行表单提交,通过回调函数实现页面互动功能。
- 【文件上传】使用jquery.form.js来实现表单提交
- 使用jquery-form.js实现form表单的异步提交
- jQuery实现Ajax提交form表单的简单方法
- Spring Cloud使用Feign实现Form表单提交的示例
- 使用jQuery.form插件,实现完美的表单异步提交
- 简单方法实现Form 无刷新提交表单
- 使用jQuery.form插件,实现完美的表单异步提交【转发】
- 利用jquery.form.js的ajaxSubmit实现不跳转提交表单数据
- 使用jQuery.form插件,实现完美的表单异步提交
- 使用jQuery.form插件,实现完美的表单异步提交
- 用jquery.form.js 实现ajax提交含有上传文件和普通字段的表单
- 【jQuery】Jquery.form.js实现表单异步提交以及文件上传(带进度条)
- 使用jQuery.form插件,实现完美的表单异步提交
- 使用jquery插件jquery.form.js,异步提交表单 1
- 使用jQuery.form插件,实现完美的表单异步提交