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. python生成器初步了解

    一.生成器 生成器的本质就是迭代器    一个一个的创建对象   1.创建生成器的方式:    1.生成器函数 2.通过生成器表达式来获取生成器 3.类型转换 2.优点 节省内存 ,生成器本身就是代码 ...

  2. Java对象的克隆

    今天要介绍一个概念,对象的克隆.本篇有一定难度,请先做好心理准备.看不懂的话可以多看两遍,还是不懂的话,可以在下方留言,我会看情况进行修改和补充. 克隆,自然就是将对象重新复制一份,那为什么要用克隆呢 ...

  3. FontAwesome 4.7.0 中完整的675个图标样式CSS参考

    FontAwesome 4.7.0 中完整的675个图标样式CSS参考 用法:首先引入CSS文件:<link href="https://maxcdn.bootstrapcdn.com ...

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

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

  5. canvas制作表盘

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. jmeter 4.0版本更新说明（个人做个记录）总版本更新合集

    版本4.0 摘要 新的和值得注意的 不兼容的变化 Bug修复 改进 非功能性变化 已知问题和解决方法 谢谢 新的和值得注意的 核心改进 JMeter现在支持JAVA 9. 提供新的边界提取器元件,提供 ...

  7. (spfa) Highway Project (zoj 3946 )

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5718   Highway Project Time Limit: 2 Seco ...

  8. CentOS 5.8下快速搭建FTP服务器

    学习安装和配置vsftpd: 实验环境:CentOS 5.8 x86_64 测试环境关掉防火墙和selinux. service iptables stop setenforce 0 1.安装vsft ...

  9. bash多进程

    #!/bin/bashCMD_PATH=`dirname $0`#echo $CMD_PATH > /home/wubin/testjava -jar $CMD_PATH/Server.jar ...

  10. [转]Android SQLite

    数据库操作SQLite Expert Personal 3 注:下载相关SQLite的文档在:http://www.sqlite.org/ 具体的sql语句不作长细介绍,在本博客中也有相关的文章. 一 ...