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. node 报错:Uncaught Error: Cannot find module "!!../../../node_modules/extract-webpack-plugin/loader.js

    问题出在缺少less和less-loader  因为以上模块使用了less解析. 解决方法在dependencies添加 "less": "^2.7.1", & ...

  2. MVC 开发模式

    1.M:Model  模型:实体类和业务和dao 2.V:view  视图:JSP 3.C:Controller  控制器:servlet 3.1 作用:视图和逻辑分离 4.MVC适用场景:大型项目开 ...

  3. 前端之jquery基础

    一 jquery介绍 介绍:jquery是一种轻量级的语言,是javascript的简化,使用javascript语言写成的.将javascript的代码简化了,并且兼容了多个浏览器的javascri ...

  4. oracle 查看表行数所占空间大小

    最新数据库空间有感觉捉急了,上次,删了些数据空了800+G,撑了一个多月,现在还有400+G,每天10G的增量,多少空间也感觉不够用啊. 不能加硬盘,就只有删数据了.. 删数据,人懒,直接找表行最多, ...

  5. Yii2 数据库查询汇总

    1.基础查询 User::find()->all(); 此方法返回所有数据: User::findOne($id); 此方法返回 主键 id=1 的一条数据(举个例子): User::find( ...

  6. android检测手机是否安装某个app

    public static boolean isAvilible(Context context, String packageName){ //获取packagemanager final Pack ...

  7. flask 知识积累

    PythonWEB框架之Flask Flask快速入门,知识整理 Flask 框架

  8. svn 提交代码 自动过滤技巧

    操作 在用svn管理版本时,有时希望在提交到服务器时,能过滤掉指定后缀名的所有文件,或指定名称的文件夹.文件名. 常见的文件夹名称和文件名如下: bin obj debug temppe *.suo ...

  9. python读取文件操作.CSV

    #-*- encoding:utf-8 -*- import numpy as np import pandas as pd def test(): # header=0,表示文件第0行为列索引 # ...

  10. Attach()和Detach()函数

    一.Windows对象和MFC对象的区别? MFC对象实际上并没有把整个Windows对象都包装在其中.对于窗口:MFC对象它只是有一个窗口句柄而已,这个窗口句柄如果指向一个实际存在的窗口对象(窗口对 ...