jQuery$.ajax函数没有'；无法从$（…）获取数据。验证函数

在尝试结合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

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

因为我认为这些变量从形式上什么也得不到

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

也许我应该使用像$（“#loginform#name”）这样的选择器？我试过了，没用。请帮忙

Quote OP:

“所以我的问题是如何从已验证的表单中提取数据并传递它 要执行“POST功能吗？”

并将您的

ajax

放入插件的

submitHandler

中

，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
        }
    });

});

$（文档）.ready（函数（）{
$（'#myform'）。验证（{//初始化插件
//你的规则和选择，
submitHandler:函数（表单）{
//var name=$（'#name'）.val（）；//使用serialize
//var pswd=$（'#pswd'）.val（）；//使用序列化
$.ajax({
类型：“POST”，
url:“${pageContext.request.contextPath}/loginUser.htm”，
//数据：“name=“+name+”&pswd=“+pswd，//使用序列化
数据：$（表单）.serialize（），
成功：功能（响应）{
//我们得到了答复
如果（response.status==“OK”）{
$（'#info'）.html（“用户已成功添加到列表中。
”+
“用户详细信息如下：
名称：“+response.result.Name+”
密码：“+response.result.pswd”）；
$（'#name'）.val（''）；
$（'pswd'）.val（''）；
}否则{
$（'#info'）.html（“对不起，提供的数据有问题”）
}
},
错误：函数（e）{
警报（'错误：'+e）；
}
});
return false；//通过ajax提交后块重定向
}
});
});

演示：

---

EDIT：OP已经从插件的

submitHandler

中调用了他的外部

ajax

函数。关于表单序列化，您完全正确。我添加了变量变量变量queryString=$（“#loginform”）.formSerialize（）；并将其用作我的数据，一切都很顺利。我认为，序列化数据是有意义的。谢谢你的帮助。

$(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
        }
    });

});