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. ThinkPHP redirect 传参

    重定向带参 $this->redirect('pay/under_line_success',array('order_id'=>$stuInfo),5,'页面跳转中….'); 第一个参数 ...

  2. linux学习--查看cpu及内存信息

    查看物理cpu个数: cat /proc/cpuinfo| grep "physical id"| sort| uniq| wc -l 查看每个cpu核数 cat /proc/cp ...

  3. 本地导入/导出远程oracle数据库

    1.导出数据库 exp 用户名/密码@远程服务器IP:数据端口号/实例名 file=存储dmp文件的路径 full=y; 2.导入数据库 imp 用户名/密码@远程服务器IP:数据库端口号/实例名 f ...

  4. Linux系统下修改环境变量PATH路径

    方法一: PATH=$PATH:/etc/apache/bin 该方法只对当前会话有效,每次注销或者拿出系统,该设置就会无效 方法二: vi /etc/profile 在适当的位置写入:PATH=$P ...

  5. Win10通知区域图标设置；windows10系统图标合并；Windows10系统通知合并

    1.一直喜欢Windows7的通知图标合并 2.通过查阅找到方法 a.输入命令语句   win+R  :shell:::{05d7b0f4-2121-4eff-bf6b-ed3f69b894d9} 回 ...

  6. 第25章：MongoDB-文档存储[理解]

    ① 将文档插入到MongoDB的时候,文档是按照插入的顺序,依次在磁盘上相邻保存 因此,一个文档变大了,原来的位置要是放不下这个文档了,就需要把这个文档移动到集合的另外一个位置,通常是最后,能放下这个 ...

  7. linux cp操作，每天学习一点

    指令名称:cp(copy)功能介绍:将一个文件复制至另一个文件,或将数个文件复制至另一目录. 语法格式: cp [options] source dest  cp [options] source.. ...

  8. python_day1_python简单介绍

    一.python解释器的种类 我们都知道python是一种解释型的语言,那python在执行的过程中必须要通过解释器来执行,那python的解释器到底分为哪些呢? 1.Cpython CPython是 ...

  9. ueditor+word粘贴上传

    公司做的项目要用到文本上传功能. 网上找了很久,大部分都有一些不成熟的问题,终于让我找到了一个成熟的项目. 下面就来看看: 1.打开工程: 对于文档的上传我们需要知道这个项目是否符合我们的初衷. 运行 ...

  10. 各版本.NET委托的写法回顾（转）

    转自:http://www.csharpwin.com/csharpspace/7548r2766.shtml 在<关于最近面试的一点感想>一文中,Michael同学谈到他在面试时询问对方 ...