关于jQuery Form Plugin使用心得
吐槽一下先
好久没开发了,今天遇到一个客户form提交的问题,想把form提交从同步变成ajax的异步方式,在网页接受返回来的数据,使用的是jquery from插件,于是网上搜了一圈,博客园,csdn,发现几乎99%全都是错的,剩下的1%排版也有问题,很不好看,浪费了大量的时间,然后去官方看文档十分钟就解决了,真是伤不起。现在国内的博客都是粘贴复制就成一篇文章,这个现象csdn最严重,博客园还好些,有点原创的东西,大牛也多。
开始正文
这个插件的使用方法呢根本不是像网上很多博客说的如下所示的使用方法
$('#myForm02').ajaxForm(function (sesponseTest) {
//$("#comment").val(sesponseTest);
alert("Thank you for your comment!" + sesponseTest);
});
而是像我下图这样的使用方法
$(document).ready(function () {
var picString = "";
var options = {
target: '#output2', // target element(s) to be updated with server response
success: function () {
alert("success");
}// post-submit callback // other available options:
//url: url // override for form's 'action' attribute
//type: type // 'get' or 'post', override for form's 'method' attribute
//dataType: null // 'xml', 'script', or 'json' (expected server response type)
//clearForm: true // clear all form fields after successful submit
//resetForm: true // reset the form after successful submit // $.ajax options can be used here too, for example:
//timeout: 3000
};
$('#myForm02').submit(function () {
$(this).ajaxSubmit(options);
return false; //阻止表单默认提交
});
需要先定义一个options参数,然后根据自己的情况给options参数的各属性赋值,然后再调用,我这边使用的是ajaxsubmit方法,ajaxform使用也是这样的。
关于ajaxForm
和ajaxSubmit的区别
ajaxform是被动的提交,而ajaxsubmit是主动的提交,这样说起来可能有点难于理解,简单来说其实就是ajaxform就等于下图的这种调用方式
$('#myForm02').submit(function () {
$(this).ajaxSubmit(options);
return false; //阻止表单默认提交
});
tips
使用这个插件要注意jquery的版本要是1.7才可以,我尝试的时候使用3.3.1是会报错的。
最后附上jquery form的官网,大家如果还有疑问的话,可以直接去那上面看看 http://malsup.com/jquery/form/
关于jQuery Form Plugin使用心得的更多相关文章
- http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html#getting-started
http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html#getting-started Jquery.Form 异步 ...
- jQuery Form 表单提交插件----Form 简介,官方文档,官方下载地址
一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...
- jQuery.form 中的 ajaxForm() 和 ajaxSubmit()
官方例子 http://malsup.com/jquery/form/#ajaxForm官方API http://malsup.com/jquery/form/#api中文API http: ...
- jQuery Form插件详解
<script src="js/jquery.form.js" type="text/javascript"></script> Jqu ...
- jquery.form.js(ajax表单提交)
Form插件地址: 官方网站:http://malsup.com/jQuery/form/ 翻译地址:http://www.aqee.net/docs/jquery.form.plugin/jquer ...
- 怎么利用jquery.form 提交form
说明:开发环境 vs2012 asp.net mvc c# 利用jQuery.form.js提交form 1.HTML前端代码 <%@ Page Language="C#" ...
- jquery.form.min.js
/*! * jQuery Form Plugin * version: 3.51.0-2014.06.20 * Requires jQuery v1.5 or later * Copyright (c ...
- jQuery.form的使用方法
首先需要引入jquery.form.js 之后即可使用 jquery.form.js的中文API网址http://www.vaikan.com/docs/jquery.form.plugin/jque ...
- jQuery form插件的使用--用 formData 参数校验表单,验证后提交(简单验证).
Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.引入依赖js <script src=& ...
随机推荐
- BZOJ1135:[POI2009]Lyz(线段树,Hall定理)
Description 初始时滑冰俱乐部有1到n号的溜冰鞋各k双.已知x号脚的人可以穿x到x+d的溜冰鞋. 有m次操作,每次包含两个数ri,xi代表来了xi个ri号脚的人.xi为负,则代表走了这么多人 ...
- 【洛谷】【堆+结论】P4597 序列sequence
[题目背景:] 原题cf13c 数据加强版(就是说原来能用DP做现在不行了QwQ) [题目描述:] 给定一个序列,每次操作可以把某个数+1-1.要求把序列变成非降数列.而且要求修改后的数列只能出现修改 ...
- 【原创】大叔经验分享(52)ClouderaManager修改配置报错
Cloudera Manager中修改配置可能报错: Incorrect string value: '\xE7\xA8\x8B\xE5\xBA\x8F...' for column 'MESSAGE ...
- mysql测试数据创建
用存储过程方式创建几十几百万条测试数据,2核4G里插入1万条,约8.5秒,也就是24小时可以加大约1亿条记录. //创建库,用户create database dbTest;create user ' ...
- Spring源码分析(一)基本介绍
摘要:本文结合<Spring源码深度解析>来分析Spring 5.0.6版本的源代码.若有描述错误之处,欢迎指正. 前言 作为一名开发人员,阅读源码是一个很好的学习方式.本文将结合< ...
- JavaScript里的创建对象(一)
一.序 面向对象有一个标志,那就是它们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.ECMA-262把对象定义为“无序属性的集合,其属性可以包含基本值.对象或者函数”. 使用Obje ...
- 404 Note Found 队-Beta5
目录 组员情况 组员1(组长):胡绪佩 组员2:胡青元 组员3:庄卉 组员4:家灿 组员5:恺琳 组员6:翟丹丹 组员7:何家伟 组员8:政演 组员9:黄鸿杰 组员10:刘一好 组员11:何宇恒 展示 ...
- Html+Css实现梯形选项卡
1,先看一下效果图 2,梯形通过定位和设置Border来实现的,平行四边形通过旋转来实现的. 3,代码如下 (1)HTML代码 <html lang="en" xmlns=& ...
- SEO优化上首页之搜索引擎用户需求理解
经过前面<搜索引擎原理SEO优化上首页之网络蜘蛛Spider>和<搜索引擎原理SEO优化上首页之内容处理与创建索引>介绍,搜索引擎已经完成页面抓取和分析,并把原始页面.索引等信 ...
- go 数组、切片
数组定义 // 标准 ]], , , , } fmt.Println("a", a) // 自动推导类型 b := [], , , , } fmt.Println(&qu ...