jQuery通过jquery.form.js插件使用AJAX提交Form表单

时间:2022-08-01 04:39:43

我简单使用了一下,jQuery Form插件有一下优点:  
1.支持提交前验证. 
2.支持提交后回调. 
3.采用AJAX方式,有很好的用户体验 
4.提交方式是灵活.只要指定要提交的form ID即可.想提交那个form.就可提交那个.同时提交参数可配置.
5.支持提交多种类型数据.如:xml,json等. 
主要的函数: 
1.ajaxForm 
增加所有需要的事件监听器,为AJAX提交表单做好准备。ajaxForm不能提交表单。在document的ready函数中,使用ajaxForm来为AJAX提交表单进行准备。ajaxForm接受0个或1个参数。这个单个的参数既可以是一个回调函数,也可以是一个Options对象。 
实例:

$('#myFormId').ajaxForm();

2.ajaxSubmit 
马上由AJAX来提交表单。大多数情况下,都是调用ajaxSubmit来对用户提交表单进行响应。ajaxSubmit接受0个或1个参数。这个单个的参数既可以是一个回调函数,也可以是一个Options对象。 
实例:

// 绑定表单提交事件处理器
$('#myFormId').submit(function() {
// 提交表单
$(this).ajaxSubmit();
// 为了防止普通浏览器进行表单提交和产生页面导航(防止页面刷新?)返回false
return false;
});

3.formSerialize 
将表单串行化(或序列化)成一个查询字符串。这个方法将返回以下格式的字符串:name1=value1&name2=value2。这个方法返回一个字符串。 
实例:

var queryString = $('#myFormId').formSerialize();
// 现在可以使用$.get、$.post、$.ajax等来提交数据
$.post('myscript.php', queryString);

4.fieldSerialize 
将表单的字段元素串行化(或序列化)成一个查询字符串。当只有部分表单字段需要进行串行化(或序列化)时,这个就方便了。这个方法将返回以下格式的字符串:name1=value1&name2=value2。这个方法返回一个字符串。 
实例:

var queryString = $('#myFormId .specialFields').fieldSerialize();

5.fieldValue 
返回匹配插入数组中的表单元素值。从0.91版起,该方法将总是以数组的形式返回数据。如果元素值被判定可能无效,则数组为空,否则它将包含一个或多于一个的元素值。该方法返回数组。 
实例:

// 取得密码输入值
var value = $('#myFormId :password').fieldValue();
alert('The password is: ' + value[0]);

6.resetForm 
通过调用表单元素原有的DOM方法,将表单恢复到初始状态。 
实例:

$('#myFormId').resetForm();

7.clearForm 
清除表单元素。该方法将所有的文本(text)输入字段、密码(password)输入字段和文本区域(textarea)字段置空,清除任何select元素中的选定,以及将所有的单选(radio)按钮和多选(checkbox)按钮重置为非选定状态。 
实例:

$('#myFormId').clearForm();

8.clearFields 
清除字段元素。只有部分表单元素需要清除时才方便使用。 
实例:

$('#myFormId .specialFields').clearFields();

jQuery Form插件的简单示例:

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My Jquery</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/jslib/jquery-1.4.2.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/jslib/jquery.form.js"></script>
<script type="text/javascript">
// wait for the DOM to be loaded
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#myForm').ajaxForm(function() {
alert("Thank you for your comment!");
});
});
// attach handler to form's submit event
$('#myFormId').submit(function() {
// submit the form
$(this).ajaxSubmit();
// return false to prevent normal browser submit and page navigation
return false;
});
</script>
</head>
<body>
<form id="myForm" action="index.jsp" method="post">
Name: <input type="text" name="name" />
Comment:<textarea name="comment"></textarea>
<input type="submit" value="Submit Comment" />
</form>
</body>
</html>

jQuery通过jquery.form.js插件使用AJAX提交Form表单的更多相关文章

  1. 表单(form)成为 ajax 提交的表单(form)

    1.form <form id="ff" method="post"> <div> <label for="name&q ...

  2. ajax 提交所有表单内容及上传图片(文件),以及单独上传某个图片(文件)

    我以演示上传图片为例子: java代码如下(前端童鞋可以直接跳过看下面的html及js): package com.vatuu.web.action; import java.io.File; imp ...

  3. Ajax提交from表单

    一,使用Ajax提交form表单到后台传参问题 1,首先,定义一个form: <form class="form-horizontal" role="form&qu ...

  4. ajax 提交 注册表单 到MySQL数据库

    今天按照要求,要做一个登陆.注册表单,本来样式做好就行了,本来咱就是干前端的,但让咱自己都没想到的是,不到一个小时竟然都干完了,实在闲的蛋疼,就想到链接数据库玩,遥想当年,毕竟咱也是写过后台的,哪知, ...

  5. DWZ框架中ajax提交文件表单的处理&lpar;关闭当前dialog &plus; 刷新父级navTab&rpar;

    先重点关注两个js文件:dwz.ajax.js和dwz.core.js 流程: 1.回调iframeCallback <form xx enctype="multipart/form- ...

  6. Ajax提交整个表单

    //view页面 <script> $(function () { $("#btnAdd").click(function () { var pars = $(&quo ...

  7. ajax 提交序列化表单

    1.提交序列化表单+参数: var a = $.param({'address':address,'delivity':delivity,'payment':payment}) + '&' + ...

  8. 异步上传图片,光用jquery不行,得用jquery&period;form&period;js插件

    异步上传图片,光用jquery不行,得用jquery.form.js插件,百度一下下载这个插件,加jquery,引入就可以了 <form id="postbackground&quot ...

  9. Ajax提交form表单内容和文件(jQuery&period;form&period;js)

    jQuery官网是这样介绍form.js A simple way to AJAX-ify any form on your page; with file upload and progress s ...

随机推荐

  1. 云计算与 OpenStack - 每天5分钟玩转 OpenStack(14)

    “云计算” 算是近年来最热的词了.现在 IT 行业见面不说这三个字您都不好意思跟人家打招呼. 对于云计算,学术界有各种定义,大家有兴趣可以百度一下. CloudMan 这里主要想从技术的角度谈谈对云计 ...

  2. spring注解实现AOP

    项目结构图

  3. -----------------------------------项目中整理的非常有用的PHP函数库(一)-----------------------------------------------------

    1.PHP加密解密 PHP加密和解密函数可以用来加密一些有用的字符串存放在数据库里,并且通过可逆解密字符串,该函数使用了base64和MD5加密和解密. function encryptDecrypt ...

  4. 为什么要使用Hibernate

    因为! a paradigm mismatch between how data is represented in objects versus relational databases ! 对象数 ...

  5. ARM Linux系统的时钟机制

    1. Linux下有两类时钟: 1.1 实时钟RTC 它由板上电池驱动的“Real Time Clock”也叫做RTC或者叫CMOS时钟,硬件时钟.当操作系统关机的时候,用这个来记录时间,但是对于运行 ...

  6. 解决VC&plus;&plus;6&period;0 无法打开、无法添加工程文件

    在windows系统下,经常会遇到这样的问题:点击VC++6.0 的[文件]下的[打开]无法操作,并且无法向工程添加文件,下面详细介绍一下解决方案? 工具/原料 VC++6.0 修复工具:FileTo ...

  7. Android 浏览器开发WebView setBlockNetworkImage本末

    含义本身防止网络数据图片 webSettings.setBlockNetworkImage(true); 停止发布数据 webSettings.setBlockNetworkImage(false); ...

  8. 求集合中选一个数与当前值进行位运算的max

    求集合中选一个数与当前值进行位运算的max 这是一个听来的神仙东西. 先确定一下值域把,大概\(2^{16}\),再大点也可以,但是这里就只是写写,所以无所谓啦. 我们先看看如果暴力求怎么做,位运算需 ...

  9. &lbrack;CodeVS4633&rsqb;&lbrack;Mz&rsqb;树链剖分练习

    思路: 轻重链剖分+线段树. #include<cstdio> #include<vector> #include<cstring> ; std::vector&l ...

  10. Docker网络配置概述

    Overview One of the reasons Docker containers and services are so powerful is that you can connect t ...