jQuery Form 表单提交插件-----ajaxForm() 的应用

时间：2022-12-24 20:53:41

Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程。

测试环境：部署到Tomcat中的web项目。

一、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>

网盘下载：https://yunpan.cn/crjzfmXqaTu9e  访问密码 e3bc

三、编写页面

<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 Form 表单提交插件-----ajaxForm() 的应用

jQuery Form 表单提交插件-----ajaxForm() 的应用

jQuery Form 表单提交插件-----ajaxForm() 的应用

jQuery Form 表单提交插件-----ajaxForm() 的应用的更多相关文章

  1. jQuery Form 表单提交插件-----formSerialize，fieldSerialize，fieldValue，resetForm，clearForm，clearFields的 应用

    一.jQuery Form的其他api  1.  formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可 ...

  2. jQuery Form 表单提交插件----Form 简介，官方文档，官方下载地址

     一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...

  3. jQuery Form 表单提交插件-----ajaxSubmit&lpar;&rpar; 的应用

    Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.ajaxSubmit() 介绍  立即通过AJ ...

  4. Jquery form表单提交

    起因 由于项目中原先提交from是通过JavaScript指定action,在submit提交的,使用的方式,也不是很标准,造成除了ie之外的浏览器都不能正常的提交数据,做web项目还是要考虑到浏览器 ...

  5. spring mvc Controller与jquery Form表单提交代码demo

    1.JSP表单 <% String basePath = request.getScheme() + "://" + request.getServerName() +&qu ...

  6. jquery插件-表单提交插件-jQuery&period;Form

    1.介绍 JQuery Form插件是一款强大的Ajax表单提交插件,可以简单方便的实现让我们的表单 由传统的提交方式转换成Ajax无刷新提交! 他提供了两个核心的方法ajaxForm以及ajaxSu ...

  7. jQuery补充之jQuery扩展&sol;form表单提交&sol;滚动菜单

    jQuery扩展 为了避免重复造*,能高效使用别人的代码,所以有了扩展. jQuery扩展有两种方式: 自执行函数方式 定义函数,并执行函数. 自执行函数: (function(jq){ jq.ex ...

  8. 关于form表单提交ajaxForm和ajaxSubmit的用法与区别

    前几天在学习form表单提交时看到这两种方法,这两种方法都是实现form的ajax提交的方法,看了很多资料还是不太明白其用法和区别,最后直接自己写demo,很快就理解,所以说实操是学习的最快捷直接的途 ...

  9. Checkbox框全选操作，form表单提交与jquery ajax提交两种处理方式

    //1.jquery ajax<script type="text/javascript"> $(function(){ var basePath = $(" ...

随机推荐

  1. autofs实现nfs自动挂载

    apt-get install autofs 主配置文件/etc/auto.master 副配置文件可以在之配置文件中自定义 能生效的配置文件如下例: 将/usr/local/nginx/html挂载 ...

  2. 使用PHP自动部署GIT代码

    最近在使用Coding的代码托管,顺便设置了WebHook自动部署,过程还是挺艰辛的,主要还是没搞懂Linux的权限控制,不过好在弄好了,分享一下获益最深的一篇文章,供大家参考,原文是英文版的,我的英 ...

  3. vagrant打造自己的开发环境

    vagrant打造自己的开发环境 缘由: 在网上看到斌哥,爽神都写了关于vagrant的博客,都在说很强大,所以很好奇这玩意怎么个强大,然后也就自己来一发玩玩看看. 真实缘由: 说实话是电脑配置太低, ...

  4. MQTT再学习 -- MQTT 客户端源码分析

    MQTT 源码分析,搜索了一下发现网络上讲的很少,多是逍遥子的那几篇. 参看:逍遥子_mosquitto源码分析系列 参看:MQTT libmosquitto源码分析 参看:Mosquitto学习笔记 ...

  5. java 安装环境

    网上关于win10 jdk安装.配置环境变量的经验有很多,但是按照方法配置后出现了运行javac 报告javac不是内部或外部命令,但是运行java.java-version正常.并不是说那些经验不正 ...

  6. Keepalived stable tarball

    Keepalived stable tarball Keepalived for Linux - Version 1.3.5 - March 19, 2017 Keepalived for Linux ...

  7. linux查找文件或目录命令

    inux查找文件或目录命令,前提:知道文件或者目录的具体名字,例如:sphinx.conf find 查找  find / -name dirname  查找目录 find -name filenam ...

  8. HDUOJ----2512一卡通大冒险

    一卡通大冒险 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  9. window上将MongoDB的启动加入到服务中

    在系统管理员的命令行模式中: 进入mongo的安装目录,参照如下: 其中: --dbpath为保存的数据的路径 mongod --bind_ip --serviceName "MongoDB ...

  10. python内置函数之print&lpar;&rpar;

    定义:将值打印到一个流对象,或者默认打印到sys.stdout. 语法: print(value, ..., sep=' ', end='\n', file=sys.stdout, flush=Fal ...

相关文章