0

在尝试结合 jQuery 验证（插件）和使用 ajax 将数据发送到服务器时，我遇到了以下问题。

如果我使用此 jQuery 方法仅将数据单独发布到服务器，则一切正常。

function doAjaxPost() {
    // get the form values
    var name = $('#name').val();
    var pswd = $('#pswd').val();

    $.ajax({
    type: "POST",
    url: "${pageContext. request. contextPath}/loginUser.htm",
    data: "name=" + name + "&pswd=" + pswd,

    success: function(response){    
        // we have the response
        if(response.status == "OK") {
            $('#info').html("User has been added to the list successfully.<br>"+
                                "The User Details are as follows : <br> Name : "+ 
                                response.result.name + " <br> Password: " + response.result.pswd);
            $('#name').val('');
            $('#pswd').val(''); 
        } else {
            $('#info').html("Sorry, there is something wrong with the data provided")
        }
    },
    error: function(e){
        alert('Error: ' + e);
    }
    });

}// end of doAjaxPost

但是当我尝试使用 jquery.validate.min.js 验证用户的输入时，服务器的响应显示一切正常，但名称和密码的值未定义我怀疑我的方法 doAjaxPost() 失败在 jquery.validator 之后从表单中提取数据。这是我的验证功能：

$(document).ready(function(){
        $("#loginform").validate({

            submitHandler: function(form) {
                doAjaxPost();
            },

            rules:{
                name:{
                    required: true,
                    minlength: 4,
                    maxlength: 16,
                },
                pswd:{
                    required: true,
                    minlength: 6,
                    maxlength: 16,
                }, 

           },
           messages:{
                name:{
                    required: "Login - is a mandatory field",
                    minlength: "Name should contain minimum {0} symbols",
                    maxlength: "Maximum symbols - {0}",
                },
                pswd:{
                    required: "Password - is a mandatory field",
                    minlength: "Password should contain minimum {0} symbols",
                    maxlength: "Password should contain maximum {0} symbols",
                },

           },

        });

    });

所以我的问题是如何从经过验证的表单中提取数据并将其传递给 doAjaxPost 函数？

因为我认为这些变量从表格中得不到任何东西

var name = $('#name').val();
var pswd = $('#pswd').val();

也许我应该使用像 $('#loginform #name') 这样的选择器？我试过了，它不起作用。请帮忙。

4

1 回答 1

0

引用操作：

“所以我的问题是如何从经过验证的表单中提取数据并将其传递给 doAjaxPost 函数？”

使用 jQuery.serialize()并将你的ajax放在插件的submitHandler.

根据 Validate plugin 的文档，submitHandler回调函数是：

“表单有效时处理实际提交的回调。获取表单作为唯一参数。替换默认提交。验证后通过 Ajax 提交表单的正确位置。”

试试这个代码，假设你的ajax函数是正确的：

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        // your rules & options,
        submitHandler: function (form) {
            //var name = $('#name').val(); // use serialize
            //var pswd = $('#pswd').val(); // use serialize
            $.ajax({
                type: "POST",
                url: "${pageContext. request. contextPath}/loginUser.htm",
                //data: "name=" + name + "&pswd=" + pswd,  // use serialize
                data: $(form).serialize(),
                success: function (response) {
                    // we have the response
                    if (response.status == "OK") {
                        $('#info').html("User has been added to the list successfully.<br>" +
                            "The User Details are as follows : <br> Name : " + response.result.name + " <br> Password: " + response.result.pswd);
                        $('#name').val('');
                        $('#pswd').val('');
                    } else {
                        $('#info').html("Sorry, there is something wrong with the data provided")
                    }
                },
                error: function (e) {
                    alert('Error: ' + e);
                }
            });
            return false; // blocks redirect after submission via ajax
        }
    });

});

演示：http: //jsfiddle.net/Cdvqw/

编辑：OP 已经ajax从插件的submitHandler.

于 2013-03-03T15:40:04.913 回答