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 相关文章推荐
基于JQuery的类似新浪微博展示信息效果的代码
Jul 23 Javascript
浅谈Javascript 执行顺序
Dec 18 Javascript
jquery序列化表单以及回调函数的使用示例
Jul 02 Javascript
浅析javascript的return语句
Dec 15 Javascript
原生js实现手风琴功能(支持横纵向调用)
Jan 13 Javascript
微信小程序教程系列之新建页面(4)
Apr 17 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
Feb 04 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
Oct 20 Javascript
微信小程序实现带缩略图轮播效果
Nov 04 Javascript
JavaScript实现轮播图效果代码实例
Sep 28 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
Mar 17 Javascript
解决vuecli3中img src 的引入问题
Aug 04 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 出现乱码和Sessions验证问题的解决方法!
2008/12/06 PHP
基于php在各种web服务器的运行模式详解
2013/06/03 PHP
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
ExtJs之带图片的下拉列表框插件
2010/03/04 Javascript
Javascript将string类型转换int类型
2010/12/09 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
2013/04/08 Javascript
细说javascript函数从函数的构成开始
2013/08/29 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
jQuery实现字符串全部替换的方法
2016/12/12 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
AngularJS的脏检查深入分析
2017/04/22 Javascript
手把手教你使用vue-cli脚手架(图文解析)
2017/11/08 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
.vue文件 加scoped 样式不起作用的解决方法
2018/05/28 Javascript
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
Vue.directive使用注意(小结)
2018/08/31 Javascript
js实现蒙版效果
2020/01/11 Javascript
详解JavaScript作用域 闭包
2020/07/29 Javascript
微信小程序实现星星评分效果
2020/11/01 Javascript
[01:34]2016国际邀请赛中国区预选赛IG战队教练采访
2016/06/27 DOTA
Python批量修改文本文件内容的方法
2016/04/29 Python
详解duck typing鸭子类型程序设计与Python的实现示例
2016/06/03 Python
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
python写入文件自动换行问题的方法
2019/07/05 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
什么是serialVersionUID
2016/03/04 面试题
描述RIP和OSPF区别以及特点
2015/01/17 面试题
职业技术学校毕业生推荐信
2013/12/03 职场文书
2014大学班主任工作总结
2014/11/08 职场文书
顶岗实习计划书
2015/01/16 职场文书
我的生日感言
2015/08/03 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
Django中celery的使用项目实例
2022/07/07 Python
Python TypeError: ‘float‘ object is not subscriptable错误解决
2022/12/24 Python