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 相关文章推荐
IE与firefox下Dhtml的一些区别小结
Dec 02 Javascript
javascript模拟select,jselect的方法实现
Nov 08 Javascript
js对象继承之原型链继承实例
Jan 10 Javascript
JavaScript中的Math.E属性使用详解
Jun 12 Javascript
JavaScript类继承及实例化的方法
Jul 25 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
javascript的函数劫持浅析
Sep 26 Javascript
讲解vue-router之命名路由和命名视图
May 28 Javascript
layui点击导航栏刷新tab页的示例代码
Aug 14 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
Dec 12 Javascript
在node中使用jwt签发与验证token的方法
Apr 03 Javascript
Ant Design的Table组件去除
Oct 24 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
PHP初学者头疼问题总结
2006/10/09 PHP
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
硬盘浏览程序,保存成网页格式便可使用
2006/12/03 Javascript
jQuery find和children方法使用
2011/01/31 Javascript
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
自己封装的javascript事件队列函数版
2014/06/12 Javascript
JavaScript数组随机排列实现随机洗牌功能
2015/03/19 Javascript
js检测iframe是否加载完成的方法
2015/11/26 Javascript
JavaScript基础教程——入门必看篇
2016/05/20 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
关于angular js_$watch监控属性和对象详解
2017/04/24 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
2018/02/24 jQuery
vue实现移动端图片上传功能
2019/12/23 Javascript
使用JavaScript获取Django模板指定键值数据
2020/05/27 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
python计算一个序列的平均值的方法
2015/07/11 Python
pandas 数据归一化以及行删除例程的方法
2018/11/10 Python
Scrapy-Redis之RedisSpider与RedisCrawlSpider详解
2020/11/18 Python
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
软件配置管理有什么好处
2015/04/15 面试题
运动会领导邀请函
2014/02/05 职场文书
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
小学毕业演讲稿
2014/04/25 职场文书
培训科主任岗位职责
2014/08/08 职场文书
银行授权委托书样本
2014/10/13 职场文书
全国法制宣传日活动总结2014
2014/11/01 职场文书
民事诉讼代理词
2015/05/25 职场文书
田径运动会通讯稿
2015/07/18 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书
三年级作文之小小梦想
2019/12/06 职场文书
本地通过nginx配置反向代理的全过程记录
2021/03/31 Servers
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android