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 相关文章推荐
5款Javascript颜色选择器
Oct 25 Javascript
jQuery解决iframe高度自适应代码
Dec 20 Javascript
善用事件代理,警惕闭包的性能陷阱。
Jan 20 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
May 28 Javascript
jquery实现左右滑动菜单效果代码
Aug 27 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
任意Json转成无序列表的方法示例
Dec 09 Javascript
js前端导出Excel的方法
Nov 01 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
详解JWT token心得与使用实例
Aug 02 Javascript
node 标准输入流和输出流代码实例
Sep 19 Javascript
vue使用map代替Aarry数组循环遍历的方法
Apr 30 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
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
js利用div背景,做一个竖线的效果。
2008/11/22 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
2013/04/24 Javascript
JavaScript 数组详解
2013/10/10 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
2015/09/24 Javascript
jQuery3.0中的buildFragment私有函数详解
2016/08/16 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
2018/11/01 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
2019/04/17 Javascript
基于Vue和Element-Ui搭建项目的方法
2019/09/06 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
在vue中使用Echarts画曲线图的示例
2020/10/03 Javascript
[02:50]【扭转乾坤,只此一招】DOTA2永雾林渊版本开启新篇章
2020/12/22 DOTA
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
python使用RNN实现文本分类
2018/05/24 Python
关于Python核心框架tornado的异步协程的2种方法详解
2019/08/28 Python
Python性能分析工具py-spy原理用法解析
2020/07/27 Python
纯css3实现鼠标经过图片显示描述的动画效果
2014/09/01 HTML / CSS
韩国演唱会订票网站:StubHub韩国
2019/01/17 全球购物
大学在校生求职信范文
2013/11/21 职场文书
留学自荐信写作方法
2014/01/27 职场文书
花店创业计划书范文
2014/02/07 职场文书
英语国培研修感言
2014/02/13 职场文书
分公司负责人任命书
2014/06/04 职场文书
教师学期个人总结
2015/02/11 职场文书
社区青年志愿者活动总结
2015/05/06 职场文书
立项申请报告范本
2015/05/15 职场文书
详解Django的MVT设计模式
2021/04/29 Python
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python