form.serialize（）无法正常工作

Question

HTML代码

<div id="address" class="col s12">
            <div class="row">
              <form method="post" action="" id="addressDetails">
                <div class="input-field col s6">
                  <textarea id="lAddress" name = 'lAddress' minlength='20' maxlength='100' class="materialize-textarea" class="validate" required length="100"></textarea>
                  <label for="lAddress" data-error="Must be between 20 to 100 Characters">Local Address</label>
                </div>
                <div class="input-field col s6">
                  <textarea id="pAddress" name = 'pAddress' minlength='20' maxlength='100' class="materialize-textarea" class="validate" required length="100"></textarea>
                  <label for="pAddress" data-error="Must be between 20 to 100 Characters">Permanent Address</label>
                </div>
              </form>
            </div>
            <div class="row center-align">
              <button type="submit" name="submitAddress" form="addressDetails" class="waves-effect waves-light light-blue darken-1 btn updateProfile">Save Address Details</button>
            </div>
          </div>

JS代码

function updateProfile(event) {
    console.log(this);
    event.preventDefault();
    form = $(this).closest('.col s12').find('form');
    console.log($(form));
    $.ajax('profile/updateProfile.php', {
        type: "POST",
        dataType: "json",
        data: form.serialize(),
        success: function(result) {
            //console.log(result);
        }
    });
}

$(document).ready(function() {
    $("button.updateProfile").on('click', updateProfile);
});

我使用Chrome调试器检查网络AJAX调用。 没有传递任何键值对。

控制台日志中没有错误。

Answer 1

您在closest()选择器不正确。 不应有空格，并且两个值都应以开头. 表示类选择器。 尝试这个：

var form = $(this).closest('.col.s12').find('form');

工作实例

Answer 2

代替

form = $(this).closest('.col s12').find('form');

采用

form = $(this).parent().closest('.col,.s12').find('form');

匹配所有类，然后找到表单元素

在JS代码的第四行

Answer 3

引用表单ID

form = $('#addressDetails');

您也可以在form.Serialize（）上放置警报，以准确查看其输出可能与您的方法所期望的对象不匹配。

您还可以通过使用来建立数据

data:'{lAddress: form.lAddress.val(), pAddress: form.pAddress.val()}'