Jquery.Form 异步提交表单的简单实例


Posted in Javascript onMarch 03, 2014

http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html#

1. 在你的页面里写一个表单。一个普通的表单,不需要任何特殊的标记:

<form id="myForm" method="post" action="/Home/AjaxForm">
<div>
Name:<input id="username" name="username" type="text" />  
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. 加入能够与服务器端进行交互的回调函数。

$(document).ready(function () { 
     //options是一个ajaxForm的配置对象。?
     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); 
});  

 // responseText是服务端的响应值。statusText是页面 
 // 提交状态值,success表示成功。 
function callBackFunc(responseText, statusText) { 
    if (statusText == 'success') { 
        alert(responseText); 
    } 
 else{ 
 alert(“服务端错误!”); 
      } 
} 
如果返回的是json数据则回调函数可以这么写 
function resultFunction(responseText,statusText) { 
        if (statusText == 'success') { 
            if (responseText.code == 1) { 
                alert(responseText.message); 
            }  
            else { 
                alert('error occurs!'); 
            } 
        } 
        else { 
            alert('服务器错误!'); 
        } 
    }

服务端的代码如下:
[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属性
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  
            }; 
 // 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; 
           } 
       }

验证用户名是否为空,是则提示输入,并取消表单提交。
Javascript 相关文章推荐
自动生成文章摘要的代码[JavaScript 版本]
Mar 20 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
Nov 14 Javascript
javascript制作坦克大战全纪录(2)
Nov 27 Javascript
底部悬浮通栏可以关闭广告位的实现方法
Jun 01 Javascript
JavaScript事件学习小结(三)js事件对象
Jun 09 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
Dec 26 Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 Javascript
Angular中sweetalert弹框的基本使用教程
Jul 22 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
Sep 18 Javascript
vue项目引入字体.ttf的方法
Sep 28 Javascript
vue中v-for通过动态绑定class实现触发效果
Dec 06 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
jquery实现ajax提交form表单的方法总结
Mar 03 #Javascript
SeaJS入门教程系列之SeaJS介绍(一)
Mar 03 #Javascript
js的hasownproperty使用示例
Mar 02 #Javascript
javascript对象的使用和属性操作示例详解
Mar 02 #Javascript
使用js显示当前时间示例
Mar 02 #Javascript
jquery实现背景墙聚光灯效果示例分享
Mar 02 #Javascript
jquery制作弹窗提示窗口代码分享
Mar 02 #Javascript
You might like
php5 apache 2.2 webservice 创建与配置(java)
2011/01/27 PHP
php设计模式 Composite (组合模式)
2011/06/26 PHP
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
PHP中imagick函数的中文解释
2015/01/21 PHP
PHP如何通过传引用的思想实现无限分类(代码简单)
2015/10/13 PHP
详谈PHP程序Laravel 5框架的优化技巧
2016/07/18 PHP
javascript this用法小结
2008/12/19 Javascript
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
深入理解Java线程编程中的阻塞队列容器
2015/12/07 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
微信小程序开发之toast提示插件使用示例
2017/06/08 Javascript
vue父子组件的嵌套的示例代码
2017/09/08 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
[48:54]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第二场 6.3
2018/06/04 DOTA
python实现的一个p2p文件传输实例
2014/06/04 Python
python3 模拟登录v2ex实例讲解
2017/07/13 Python
Python动态生成多维数组的方法示例
2018/08/09 Python
使用CSS变量实现炫酷惊人的悬浮效果
2019/04/26 HTML / CSS
国外平面设计第一市场:99designs
2016/10/25 全球购物
进修护士自我鉴定
2013/10/14 职场文书
长安大学毕业生自我鉴定
2014/01/17 职场文书
教师简历自我评价
2014/02/03 职场文书
开会迟到检讨书
2014/02/03 职场文书
银行简历自我评价
2014/02/11 职场文书
2014年食品安全工作总结
2014/12/04 职场文书
初二学生评语大全
2014/12/26 职场文书
课外活动总结
2015/02/04 职场文书
七一慰问简报
2015/07/20 职场文书
2015年政教主任工作总结
2015/07/23 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
JavaScript实现一键复制内容剪贴板
2022/07/23 Javascript