jQuery $ .ajax函数不会从$（...）获取数据validate function

Question

我在尝试将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来验证用户的输入，从服务器的响应向我表明一切正常，但名和密码的值undefinded我怀疑我的方法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(); 

也许我应该使用像$选择器（“＃＃NAME登录表单”）？我试过了，它不起作用。请帮忙。

Answer 1

报价OP：

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

内插件的submitHandlerUse jQuery .serialize()，把你的ajax。

As per the documentation for the 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 
     } 
    }); 

}); 

DEMO：http://jsfiddle.net/Cdvqw/

编辑：OP已经有他的外部ajax功能从内插件的submitHandler称为。