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 相关文章推荐
escape、encodeURI、encodeURIComponent等方法的区别比较
Dec 27 Javascript
javascript 关于# 和 void的区别分析
Oct 26 Javascript
JavaScript 选中文字并响应获取的实现代码
Aug 28 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
May 13 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
Dec 30 Javascript
Jquery遍历checkbox获取选中项value值的方法
Feb 13 Javascript
JS显示下拉列表框内全部元素的方法
Mar 31 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
Jun 18 Javascript
js实现a标签超链接提交form表单的方法
Jun 24 Javascript
纯js实现图片匀速淡入淡出效果
Aug 22 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
Aug 12 Javascript
微信小程序实现文件、图片上传功能
Aug 18 Javascript
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
win7安装php框架Yii的方法
2016/01/25 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
splice slice区别
2006/10/09 Javascript
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
Prototype Array对象 学习
2009/07/19 Javascript
node.js中的fs.symlinkSync方法使用说明
2014/12/15 Javascript
JavaScript中length属性的使用方法
2015/06/05 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
简单谈谈axios中的get,post方法
2017/06/25 Javascript
各种选择框jQuery的选中方法(实例讲解)
2017/06/27 jQuery
浅谈Vue-cli 命令行工具分析
2017/11/22 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
2017/12/26 Javascript
react-router browserHistory刷新页面404问题解决方法
2017/12/29 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
vue中监听路由参数的变化及方法
2019/12/06 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
jQuery实现简单三级联动效果
2020/09/05 jQuery
[44:22]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第一场 11.01
2020/11/02 DOTA
Python中的高级数据结构详解
2015/03/27 Python
python3调用R的示例代码
2018/02/23 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
加拿大时装零售商:Influence U
2018/12/22 全球购物
澳大利亚家具商店:Freedom
2020/12/17 全球购物
校长岗位职责
2013/11/26 职场文书
葛优非诚勿扰搞笑征婚台词
2014/03/17 职场文书
竞聘上岗演讲稿
2014/05/16 职场文书
村容村貌整治方案
2014/05/21 职场文书
初中教师个人总结
2015/02/10 职场文书
2015年保卫科工作总结
2015/05/14 职场文书
团组织推荐意见
2015/06/05 职场文书
庭外和解协议书
2016/03/23 职场文书
梳理总结Python开发中需要摒弃的18个坏习惯
2022/01/22 Python