jQuery ajaxForm()的应用


Posted in Javascript onOctober 14, 2016

jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地、无侵入地升级HTML表单以支持Ajax。提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程。本文就是介绍了ajaxForm()的应用.

一、ajaxForm() 介绍

ajaxForm预处理将要使用 AJAX  方式提交的表单,将所有需要用到的事件监听器添加到其中。它不是提交这个表单。 在页面的ready函数里使用ajaxForm来给你页面上的表单做这些AJAX提交的准备工作。

ajaxForm 需要零个或一个参数。这唯一的一个参数可以是一个回调函数或者是一个可选参数对象。

是否可以连环调用: 是。

二、引入依赖的js

<script src="jquery-1.3.1.js" type="text/javascript"></script>
 <script src="jquery.form.js" type="text/javascript"></script>

三、编写页面

<form id="myForm" action="demo.jsp" method="post"> 
    名称: <input type="text" name="name" /> <br/>
    地址: <input type="text" name="address" /><br/> 
    自我介绍: <textarea name="comment"></textarea> <br/>
    <input type="submit" id="test" value="提交" /> <br/>
    <div id="output1" style="display:none;"></div>
  </form>

四、调用ajaxForm() 方法

<script type="text/javascript">     
  $(document).ready(function() { 
      $('#myForm').ajaxForm(function() {  
        $('#output1').html("提交成功!欢迎下次再来!").show();  
      });  
  });  
  </script>

五、详细代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <title>jQuery Form插件例子-ajaxForm()</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <script src="jquery-1.3.1.js" type="text/javascript"></script>
 <script src="jquery.form.js" type="text/javascript"></script>
  <script type="text/javascript">     
  $(document).ready(function() { 
      $('#myForm').ajaxForm(function() {  
        $('#output1').html("提交成功!欢迎下次再来!").show();  
      });  
  });  
  </script> 
 </head>
 
 <body>
  <h3> Demo 1 : form插件的使用--ajaxForm(). </h3>
  <form id="myForm" action="demo.jsp" method="post"> 
    名称: <input type="text" name="name" /> <br/>
    地址: <input type="text" name="address" /><br/> 
    自我介绍: <textarea name="comment"></textarea> <br/>
    <input type="submit" id="test" value="提交" /> <br/>
    <div id="output1" style="display:none;"></div>
  </form>
 </body>
</html>

六、编写接收表单的测试代码。demo.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");//防止乱码!
String name = request.getParameter("name");
String address = request.getParameter("address");
String comment = request.getParameter("comment");
System.out.println(name + " " +address + " " +comment);
%>

七、效果如下:

jQuery ajaxForm()的应用

以上所述是小编给大家介绍的ajaxForm()的应用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jquery AJAX 用于计算点击率(统计)
Jun 30 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
Feb 14 Javascript
jquery配合css简单实现返回顶部效果
Sep 30 Javascript
jquery自动补齐功能插件flexselect用法示例
Aug 06 Javascript
原生js封装的一些jquery方法(详解)
Sep 20 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
Oct 30 Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 Javascript
基于pako.js实现gzip的压缩和解压功能示例
Jun 13 Javascript
jQuery中extend函数简单用法示例
Oct 11 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
Angular5.1新功能分享
Dec 21 Javascript
小程序页面动态配置实现方法
Feb 05 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
Oct 14 #Javascript
jQuery如何防止Ajax重复提交
Oct 14 #Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
Oct 14 #Javascript
浅析JS中对函数function的理解(基础篇)
Oct 14 #Javascript
js插件Jcrop自定义截取图片功能
Oct 14 #Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 #Javascript
Js动态设置rem来实现移动端字体的自适应代码
Oct 14 #Javascript
You might like
Yii2如何批量添加数据
2016/05/17 PHP
php接口技术实例详解
2016/12/07 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
csdn 批量接受好友邀请
2009/02/19 Javascript
Javascript下IE与Firefox下的差异兼容写法总结
2010/06/18 Javascript
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
js实现数组冒泡排序、快速排序原理
2016/03/08 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
2016/07/28 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
JS控件bootstrap suggest plugin使用方法详解
2017/03/25 Javascript
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
2018/01/21 jQuery
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
2018/05/15 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
JS+canvas五子棋人机对战实现步骤详解
2020/06/04 Javascript
[01:01:35]Optic vs paiN 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Go/Python/Erlang编程语言对比分析及示例代码
2018/04/23 Python
matplotlib 输出保存指定尺寸的图片方法
2018/05/24 Python
Python格式化输出字符串方法小结【%与format】
2018/10/29 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
python 抓包保存为pcap文件并解析的实例
2019/07/23 Python
Python函数的返回值、匿名函数lambda、filter函数、map函数、reduce函数用法实例分析
2019/12/26 Python
python pptx复制指定页的ppt教程
2020/02/14 Python
Otticanet意大利:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
服务员自我评价
2014/01/25 职场文书
俄语专业毕业生求职信
2014/07/12 职场文书
教育合作协议范本
2014/10/17 职场文书
乡镇法制宣传日活动总结
2015/05/05 职场文书
2016大学迎新欢迎词
2015/09/29 职场文书