jQuery表单序列化 - 只返回一个空字符串

时间:2014-12-02 16:28:33

标签: jquery serialization jquery-validate

我没有从序列化我的html表单中获取任何数据。这是表格

<form method="post" action="#" name='basicForm' id='basicForm'>

<input type="text" name="n_username" id="id_username" class="form-control uname" placeholder='Username' value='test_user' data-msg-required='The input field is required.' data-rule-required='true'/>

<input type="password" name="n_password" id="id_password" class="form-control pword" placeholder='Password' value='xxxx' data-msg-required='The input field is required.' data-rule-required='true'/>                  

<button class="btn btn-success btn-block">Sign In</button> </form>

这里是jquery

jQuery(document).ready(function(){
    $("#basicForm").validate({

        submitHandler: function (form) {
            var request;
            var $form = $(this);

            var $inputs = $form.find("input, select, button, textarea");

            var serializedData = $form.serialize();
            alert (serializedData);  <==empty

            $inputs.prop("disabled", true);

            request = $.ajax({
                url: "./ajax/login.php",
                type: "post",
                data: serializedData
            });

            request.done(function (response, textStatus, jqXHR) {
                // log a message to the console
                console.log("Hooray, it worked!");
                alert(response);
                //window.location.replace("success.php");
             });
        }


    }); //validate

});//ready
</script>

表单中的数据未序列化。我得到一个空警报框。同样在ajax页面上,我回发到i print_r $ _post数组,得到这个:Array()

我已检查过表单元素的名称,这似乎是常见的问题。我正在使用这个jquery版本

验证工作正常。这也有效

var x = $("#id_username").val();
 var y = $("#id_password").val();
request = $.ajax({
                url: "./ajax/login.php",
                type: "post",
                //data: serializedData
                data : {
                    username : x,
                    password: y
                    }

提前感谢您提供的任何帮助

1 个答案:

答案 0 :(得分:2)

你在这里打破它......

submitHandler: function (form) {
    ...
    var $form = $(this); // <- '$(this)' is meaningless
    ...
    var serializedData = $form.serialize();
    ...

此上下文中没有$(this),因此您的$form为空。

由于开发人员已经提供了代表form对象的form参数,因此该版本工作正常......

submitHandler: function (form) {
    var serializedData = $(form).serialize();
    ...

工作演示:http://jsfiddle.net/gpaf8187/

注意:您的type="submit"元素中还需要<button>,否则验证插件将无法接收此事件。