jQuery ajaxForm()的应用

原创 2018年04月17日 11:37:59

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

一、ajaxForm() 介绍 

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

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

是否可以连环调用: 是。

二、引入依赖的js

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

三、编写页面

1
2
3
4
5
6
7
<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() 方法

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

五、详细代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!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

1
2
3
4
5
6
7
8
<%@ 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);
%>

七、效果如下:

专业拖放技术在CBuilder和Delphi下的实现

一. 重写控件的GetDragImages方法.实现步骤:1.重写控件的GetDragImages方法class TMyPanel:public TPanel{private:TDragImageLi...
  • houzh
  • houzh
  • 2002-03-13 09:00:00
  • 1036

jquery提交form表单之ajaxForm() 和 ajaxSubmit()的区别

今天在学习恰巧学习到用jquery提交form表单 特赶紧整理下来,以便日后使用。 首先需要在页面引入form.js的插件用jquery表单提交form表单有两种方式,一种是 ajaxSubmit...
  • sjl6666666666
  • sjl6666666666
  • 2016-11-19 18:05:52
  • 1494

jquery插件 ajaxForm文档

表单插件API 表单插件API提供了几种方法,可以让您轻松管理表单数据和表单提交。 ajaxForm通过添加所有必要的事件侦听器来准备要通过AJAX提交的表单。它并没有提交表单。使用ajaxF...
  • MissWwg
  • MissWwg
  • 2017-11-30 18:22:20
  • 406

Jquery表单插件ajaxForm

前端时间写项目用到了ajaxForm这个插件,可以用它提交表单和上传图片,听起来和正常的form表单提交没什么区别,只不过是ajax提交,无需刷新页面,如此可以增加用户体验度。引入两个文件,PS:必须...
  • ityang521
  • ityang521
  • 2017-01-16 23:31:23
  • 294

Ajax使用jQuery提交表单 文件

  • 2016年05月29日 10:34
  • 66KB
  • 下载

Jquery.form.js【支持from提交的Ajax】

  • 2009年05月28日 08:09
  • 7KB
  • 下载

jquery.form.js失效问题。

项目中引用 jquery.form.js插件。 打算用      .ajaxForm(options);    方式提交到后台,但是发现  .ajax 是可以正常交互的,但是  .ajaxform ...
  • u012246342
  • u012246342
  • 2016-08-22 14:31:34
  • 3020

jquery form插件(三)ajax文件上传

jquer form实现文件上传 $(document).ready(function(){ $('#uploadForm').ajaxForm({ dataType: 'json', ...
  • ms_X0828
  • ms_X0828
  • 2012-05-04 17:51:30
  • 16816

jquery ajaxform

  • 2013年09月04日 09:12
  • 41KB
  • 下载

Ajax表单提交插件jquery form

  • 2014年06月04日 00:31
  • 8KB
  • 下载
收藏助手
不良信息举报
您举报文章:jQuery ajaxForm()的应用
举报原因:
原因补充:

(最多只允许输入30个字)