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 异步提交表单实例
http://www.aqee.net/docs/jquery.form.plugin/jquery.form.plugin.html#getting-started
1. 在你的页面里写一个表单。一个普通的表单,不需要任何特殊的标记:
<form id="myForm" method="post" action="/Home/AjaxForm">
<div>
Name:<input id="username" name="username" type="text" />
Password:<input id="password" name="password" type="text" />
<br />
<input type="submit" value="submit async" id="lnkSubmit" />
</div>
</form>
在没有Jquery.Form组件的时候,提交表单,页面会进入阻塞模式,等待服务器端的响应。
2. 引入jQuery和Form Plugin Javascript脚本文件并且添加几句简单的代码让页面在DOM加载完成后初始化表单:
<head>
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/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异步提交事件,并提供一个简单的回调函数。
$('#myForm').ajaxForm(function() {
alert("Thank you for your comment!");
});
});
</script>
</head>
加上jquery.form组件后,提交表单时,页面不会再同步提交,而是由js做异步提交,因此提交后页面不会有刷新。
3. 加入能够与服务器端进行交互的回调函数。
1
|
$(document).ready( function () { |
//options是一个ajaxForm的配置对象。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
var options = { //target: '#output1', // target element(s) to be updated with server response //beforeSubmit: showRequest, // pre-submit callback <font color= "#ff0000" > success: callBackFunc // post-submit callback</font> // 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 }; // bind form using 'ajaxForm' $( '#myForm' ).ajaxForm(options); }); |
1
|
// responseText是服务端的响应值。statusText是页面 |
1
2
3
4
5
|
// 提交状态值,success表示成功。 function callBackFunc(responseText, statusText) { if (statusText == 'success' ) { alert(responseText); } |
1
|
else { |
1
|
alert(“服务端错误!”); |
1
2
|
} } |
1
|
如果返回的是json数据则回调函数可以这么写 |
1
2
3
4
5
6
7
8
9
10
11
12
13
|
function resultFunction(responseText,statusText) { if (statusText == 'success' ) { if (responseText.code == 1) { alert(responseText.message); } else { alert( 'error occurs!' ); } } else { alert( '服务器错误!' ); } } |
服务端的代码如下
1
2
3
4
5
6
7
|
[HttpPost] public ActionResult AjaxForm(FormCollection form) { string message = "Name:" + form[ "username" ] + " PWD: " +form[ "password" ] ; //return Content(message); return Json( new { code = 1, message = message }); } |
4. 加入提交前的数据校验函数
为options对象添加 beforeSubmit属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
var options = { //target: '#output1', // target element(s) to be updated with server response <font color= "#ff0000" >beforeSubmit: checkData, // pre-submit callback </font> success: callBackFunc // 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 }; |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
// pre-submit callback function checkData(formData, jqForm, options) { // formData is an array; here we use $.param to convert it to a string to display it // but the form plugin does this for you automatically when it submits the data //var queryString = $.param(formData); // jqForm is a jQuery object encapsulating the form element. To access the // DOM element for the form do this: var formElement = jqForm[0]; //alert('About to submit: \n\n' + queryString); // here we could return false to prevent the form from being submitted; // returning anything other than false will allow the form submit to continue //return true; if ($(formElement).find( "#username" ).val() == "" ) { alert( "please enter username!" ); return false ; } else { return true ; } } |
验证用户名是否为空,是则提示输入,并取消表单提交。
http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html#getting-started的更多相关文章
- jquery plugin 之 form表单验证插件
基于h5表单验证系统.扩展了对easyui组件的支持 先上图: 提示样式用到了伪对象的 {content: attr(xxx)}函数方法,实现提示信息能动态切换. 1.关键属性说明: type: 表单 ...
- 5个最顶级jQuery图表类库插件-Charting plugin
转载: http://www.cnblogs.com/chu888chu888/archive/2012/12/22/2828962.html 作者:Leonel Hilario翻译:Terry li ...
- 2016 系统设计第一期 (档案一)jQuery ajax serialize()方法form提交数据
jQuery ajax serialize()方法form提交数据,有个很奇怪的问题,好像不能取到隐藏控件的值. //点击提交按钮保存数据 $('#btn_submitUser').click(fun ...
- JQuery Plugin 1 - Simple Plugin
1. How do you write a plugin in jQuery? You can extend the existing jQuery object by writing either ...
- 今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式
今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式 jquery中的serialize() 方法 该方法通过序列化表单值,创建 URL 编码文本字符串 序列化的值可在 ...
- jquery实现ajax提交form表单的方法总结
本篇文章主要是对jquery实现ajax提交form表单的方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 方法一: function AddHandlingFeeToRefund( ...
- jquery.form.js+jquery.validation.js实现表单校验和提交
一.jquery引用 主要用到3个js: jquery.js jquery.form.js jquery.validation.js 另外,为了校验结果提示本地化,还需要引入jquery.vali ...
- jquery.validate校验+jquery.form提交,配合使用
原文链接:http://www.cnblogs.com/datoubaba/archive/2012/06/06/2538873.html 概述:本篇主要讨论jquery.validate结合jque ...
- jquery学习笔记---jquery插件开发
http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html jquery插件开发:http://www.cnblogs.com/damonla ...
随机推荐
- 解决IDEA、Pycharm连接数据库乱码的问题
一.IDEA. 使用IDEA连接数据库: import java.sql.Connection;import java.sql.DriverManager;import java.sql.Result ...
- 字符串算法hash
思路:给字符串做一个映射,两个元素相同,则他们的hash值必定相同. 注意:hash表必须是unsigned int类型,保证每个映射都是正数. 例题: Description 给出两个字符串W和T, ...
- 普通用户修改.bash_profile 权限问题
例如oracle用户想要修改它下面的.bash_profile文件: 在命令行运行: [root@localhost ~]# ls -lh /home/oracle/.bash_profile
- java socket之上传文件
一.功能介绍 该功能主要实现,将客户端的:F:/work/socketSample/filetemp/client/test_client.txt上传到服务端F:/work/socketSample/ ...
- C#和java的对比及总结
1.Java里的AClass.class得到的Class<T>类的对象对应C#的typeof(AClass)得到的Type类型的对象:(但是C#如果要反射创建对象是用Type对象的Asse ...
- myeclipse安装maven
开始开门见山了,至于maven是什么请百度百科. 第一步: 下载maven,进入maven官网下载:http://maven.apache.org/download.cgi 第二步: 1.解压下载好的 ...
- ubuntu server 在 virtualbox中安装增强包
原文链接:http://luzl.iteye.com/blog/1010597 首先说下增强包能干什么,在desktop下面有了增强包桌面就能变大了,在server下也是类似,那个黑屏就能变大了,还有 ...
- html5 ajax多图片可预览上传图片
最近不是特别忙,我就利用html5写了个上传图片(或其他文件)的页面,主要利用是html5的file api,此页面比较简陋,没做样式的优化,包含上传图片预览,多图片上传,上传进度条(利用html5的 ...
- c 语言申明头文件和实现分开简单例子
很多时候,看到很多c函数的声明和实现是分开的.声明放在头文件,实现却放在另一个文件,最后函数被其他文件调用. 下面以简单例子说明. 一.声明部分 /* test.h */ #include <s ...
- noip第28课作业
分段数列 [问题描述] 对于给定的一个长度为N的正整数数列A[i],现要将其分成连续的若干段,并且每段和不超过M(可以等于M),问最少能将其分成多少段使得满足要求. 输入格式: 输入第1行包含两个正整 ...