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" /> &nbsp;
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的更多相关文章

  1. jquery plugin 之 form表单验证插件

    基于h5表单验证系统.扩展了对easyui组件的支持 先上图: 提示样式用到了伪对象的 {content: attr(xxx)}函数方法,实现提示信息能动态切换. 1.关键属性说明: type: 表单 ...

  2. 5个最顶级jQuery图表类库插件-Charting plugin

    转载: http://www.cnblogs.com/chu888chu888/archive/2012/12/22/2828962.html 作者:Leonel Hilario翻译:Terry li ...

  3. 2016 系统设计第一期 （档案一）jQuery ajax serialize()方法form提交数据

    jQuery ajax serialize()方法form提交数据,有个很奇怪的问题,好像不能取到隐藏控件的值. //点击提交按钮保存数据 $('#btn_submitUser').click(fun ...

  4. JQuery Plugin 1 - Simple Plugin

    1. How do you write a plugin in jQuery? You can extend the existing jQuery object by writing either ...

  5. 今天在研究jquery用ajax提交form表单中得数据时，学习到了一种新的提交方式

    今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式 jquery中的serialize() 方法 该方法通过序列化表单值,创建 URL 编码文本字符串 序列化的值可在 ...

  6. jquery实现ajax提交form表单的方法总结

    本篇文章主要是对jquery实现ajax提交form表单的方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 方法一:  function AddHandlingFeeToRefund( ...

  7. jquery.form.js+jquery.validation.js实现表单校验和提交

      一.jquery引用 主要用到3个js: jquery.js jquery.form.js jquery.validation.js 另外,为了校验结果提示本地化,还需要引入jquery.vali ...

  8. jquery.validate校验+jquery.form提交，配合使用

    原文链接:http://www.cnblogs.com/datoubaba/archive/2012/06/06/2538873.html 概述:本篇主要讨论jquery.validate结合jque ...

  9. jquery学习笔记---jquery插件开发

    http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html jquery插件开发:http://www.cnblogs.com/damonla ...

随机推荐

  1. tms web core 里面调用pascal 过程。

    procedure show(s:string);begin  showmessage(s);end; procedure TForm3.WebButton1Click(Sender: TObject ...

  2. 31、iOS 正则表达式判断UITextField是否为全汉字，全字母，全数字，数字和字母

    判断全汉字 if ([self deptNameInputShouldChinese]) { [DemonAlertHelper showToastWithMessage:@"只能是中文&q ...

  3. 2019.01.19 bzoj4592: [Shoi2015]脑洞治疗仪（ODT）

    传送门 ODT水题. 支持区间01赋值,区间填补(把区间[l,r][l,r][l,r]从左往右数kkk个1都变成0),区间查询最长连续1个数. 思路: 区间填补操作感觉不是很好弄,写线段树的神仙可以套 ...

  4. JPA错误

    2016-11-141.2016-10-31: hibernate用注解 一对多 报Could not determine type for错误 原因:  接下来继续解决第二个问题:怎么又与集合打交道 ...

  5. String拼接

    1. String[] members=ArrayDATA_IDS; String usernames = ""; for(String id :members) { userna ...

  6. 证明解析函数u=c1 与 v=c2 正交

    方程u(x,y)=c1对应平面上的曲线, 求导dy/dx=  -ux/uy   类似有v曲线的dy/dx=-vx/vy   两者相乘,使用柯西-黎曼方程结果是-1 表示在相交点两者的切线互相垂直. 另 ...

  7. Web墨卡托坐标与WGS84坐标互转

    原文地址:http://bbs.esrichina-bj.cn/ESRI/thread-78245-1-1.html 在WebGIS的开发中经常用到的地图投影为Web墨卡托和WGS84,故歌地图,bi ...

  8. 从点到面，给Button的属性动画

    属性动画是API 11加进来的一个新特性,其实在现在来说也没什么新的了.属性动画可以对任意view的属性做动画,实现动画的原理就是在给定的时间内把属性从一个值变为另一个值.因此可以说属性动画什么都可以 ...

  9. Ubuntu下安装并配置TexStudio

    作者:tongqingliu 转载请注明出处:http://www.cnblogs.com/liutongqing/p/7069715.html Ubuntu下安装并配置TexStudio Ubunt ...

  10. spring boot jpa 多条件组合查询带分页的案例

    spring data jpa 是一个封装了hebernate的dao框架,用于单表操作特别的方便,当然也支持多表,只不过要写sql.对于单表操作,jpake可以通过各种api进行搞定,下面是一个对一 ...