首页 > 其他 > 详细

使用ajax提交表单

时间:2014-08-30 16:20:49      阅读:176      评论:0      收藏:0      [点我收藏+]

1、ajaxForm

作用:

(1)预加载js事件到form

(2)提交action前js验证表单

(3)提交action后,结果由js处理,不自动跳转

要求:

<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>

示例:

<script type="text/javascript">
            //var error = document.getElementById(‘errorDiv‘);
            //注意的是var error只在这里声明,不要赋值 ,赋值也是null
            var error;
            // wait for the DOM to be loaded 
            $(document).ready(function() {
                error = document.getElementById(‘errorDiv‘);
                // bind ‘myForm‘ and provide a simple callback function   
                var options = {
                    //target:        ‘#output1‘,   // target element(s) to be updated with server response 
                    beforeSubmit : validate,// pre-submit callback 
                    dataType : ‘json‘,// ‘xml‘, ‘script‘, or ‘json‘ (expected server response type) 
                    //dataType必须放在callback(json)前面,因为callback(json)要调用json这个变量
                    success : function(json) {
                        json = eval(json);
                        if (json.errcode == 0) {
                            window.location.href = ‘seller/seller.jsp‘;

                        } else {
                            error.innerHTML = "账号和密码错误,请重新登录.";
                        }
                    }
                // 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 
                //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 
                };
                $(‘#loginForm‘).ajaxForm(options);
            });
            function validate() {
                var username = document.getElementById("name").value;
                var password = document.getElementById("pwd").value;
                //检测是否为空可以将其交给前台处理;  
                if (username.length == 0) {
                    error.innerHTML = "账号不能为空";
                    return false;
                } else if (password.length == 0) {
                    error.innerHTML = "密码不能为空";
                    return false;
                }
                error.innerHTML = "正在登录";
            }
        </script>

 

 

Done

使用ajax提交表单

原文:http://www.cnblogs.com/xingyyy/p/3946497.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!