jQuery ajaxForm()的应用

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);
%>

七、效果如下：

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

赞 (0)

相关推荐

  • ajaxForm和ajaxSubmit 粘贴就可用示例代码

    复制代码 代码如下: <!-- To change this template, choose Tools | Templates and open the template in the editor. --> <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/ht

  • php实现图片上传并进行替换操作

    首先建立两个文件: change.html 和 change.php change.html 文件的表单代码如下: <html> <head> <title>change file example.</title> <meta charset="UTF-8"> </head> <body> <form method="post" action="changefile.

  • 两种php实现图片上传的方法

    两种php实现图片上传的方法

    图片上传在项目中经常用到,几乎没有任何一个项目可以脱离图片或者是文件上传.本篇我在这向大家介绍两种常规的上传方式.(注:在这里我们仅仅是对功能的实现,不去做过多的前端的样式) 一.利用form表单上传 此种方式是最原始的上传方式,前端就是简单的form表单,后端我们有PHP处理传输过来的文件. 首先看前端的代码 upload.html <form action="handle.php" name="form" method="post" e

  • php+html5实现无刷新图片上传教程

    php+html5实现无刷新图片上传教程

    本篇向大家介绍一种全新的上传图片的方式,利用html5的FileReader读取图片文件,然后将数据传输到服务器再使用PHP进行处理.实现过程如下(带图片预览功能) 前端html代码 upload,html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content=&qu

  • TinyMCE提交AjaxForm获取不到数据的解决方法

    本文实例分析了TinyMCE提交AjaxForm获取不到数据的解决方法.分享给大家供大家参考.具体分析如下: 在没有使用AjaxForm前,我做的一个小小的评论提交的Web form,评论内容使用了TinyMCE做文本编辑.为了增加一点点的用户体验,就顺手拿AjaxForm来实现Ajax提交.可是发现出现了一个意外的事情.就是每次提交,第一次提交时,AjaxForm会无法获得当前编辑的评论内容,即TextArea里面的内容,要再点击一次提交,才能将TextArea的内容提交上去. 关键是Tiny

  • 浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用

    • 依赖的脚本文件 <script src="../Javascript/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="../Javascript/jquery.form.js" type="text/javascript"></script> • ajaxSubmit 和ajaxForm区

  • php实现图片上传、剪切功能

    本文实例为大家详细介绍了php实现图片上传.剪切功能的具体代码,供大家参考,具体内容如下 <?php defined('BASEPATH') OR exit('No direct script access allowed'); class Index extends MY_Controller { function __construct(){ parent::__construct(); $this->load->helper(array('form', 'url')); } /**

  • jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象

    jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象

    Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 本文演示的是:jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象 ajaxForm()和ajaxSubmit()的可选参数项对象 ajaxForm 和 ajaxSubmit 都支持大量的可选参数,它们通过可选参数项对象传入.可选参数项对象只是一个简单的 JavaScript对象,里边包含了一些属性和一些值:

  • PHP AjaxForm提交图片上传并显示图片源码

    本文实例为大家分享了PHP AjaxForm提交图片上传并显示图片的具体代码,供大家参考,具体内容如下 PHP dofile.php 文件上传源码 <?php $file_upload = "upload/"; $file_allow_ext='gif|jpg|jpeg|png|gif|zip|rar|ppt|xls|pdf|pptx|xlsx|docx'; $file_allow_size = 5*1024*1024; if($_POST['submit']=="上传

  • springMVC结合AjaxForm上传文件

    最近在项目中需要上传文件文件,之前一直都是form提交的,尝试了一下AjaxForm,感觉还比较好用,写篇随笔mark下,供以后使用. 准备工作: 下载jquery-form.js 相关jar: commons-fileupload-1.1.1.jar commons-io-1.3.2.jar 在spring-servlet.xml进行multipartResolver配置: <bean id="multipartResolver" class="org.springf

随机推荐