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. spring boot 实现mybatis拦截器

    spring boot 实现mybatis拦截器 项目是个报表系统,服务端是简单的Java web架构,直接在请求参数里面加了个query id参数,就是mybatis mapper的query id ...

  2. 2018.11.01 loj#2319. 「NOIP2017」列队（线段树）

    传送门 唉突然回忆起去年去noipnoipnoip提高组试水然后省二滚粗的悲惨经历... 往事不堪回首. 所以说考场上真的有debuffdebuffdebuff啊!!!虽然当时我也不会权值线段树 这道 ...

  3. Laravel创建自定义 Artisan 控制台命令实例教程

    来源:http://laravelacademy.org/post/1374.html 1.入门 Laravel通过Artisan提供了强大的控制台命令来处理非浏览器业务逻辑.要查看Laravel中所 ...

  4. android studio友盟分享demo运行报错Gradle's dependency cache may be corrupt解决方法

    gradle-wrapper.properties里修改了gradle的版本,与之前没有报错的项目gradle版本一致.

  5. KAFKA 监控管理界面 KAFKA EAGLE 安装

    概述 Kafka Eagle监控系统是一款用来监控Kafka集群的工具,目前更新的版本是v1.2.3,支持管理多个Kafka集群.管理Kafka主题(包含查看.删除.创建等).消费者组合消费者实例监控 ...

  6. greenplum 开启和关闭服务

    1.关闭服务$pg_ctl stop -m fast -D $MASTER_DATA_DIRECTORY (/usr/local/greenplum-db/bin) 2.开启服务 $pg_ctl st ...

  7. C# 中的委托（Delegate）

    委托(Delegate) 是存有对某个方法的引用的一种引用类型变量.引用可在运行时被改变. 委托(Delegate)特别用于实现事件和回调方法.所有的委托(Delegate)都派生自 System.D ...

  8. dj 用户认证组件

    auth模块 from django.contrib import auth django.contrib.auth中提供了许多方法,主要的三个: 1.1 authenticate() 提供了用户认证 ...

  9. oracle忘记了sys,system 密码后怎么修改？

    一.忘记除SYS.SYSTEM用户之外的用户的登录密码.  用SYS (或SYSTEM)用户登录: CONN SYS/PASS_WORD AS SYSDBA;  使用如下语句修改用户的密码: ALTE ...

  10. linux下禁用SELinux

    http://chenzhou123520.iteye.com/blog/1313582 如何开启或关闭SELinux RedHat的 /etc/sysconfig/selinux 在新版本中的Red ...