form.serialize()不起作用

时间:2016-07-27 12:17:46

标签: javascript jquery ajax forms

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调用。没有传递任何键值对。

控制台日志中没有错误。

3 个答案:

答案 0 :(得分:2)

<div id="status_box_content" runat="server"> UserControl uc = ((UserControl)this.Master.FindControl("ucTopUser")); HtmlGenericControl div = (HtmlGenericControl )uc.FindControl("status_box_content"); div.Visible = false; 中的选择器不正确。应该没有空格,并且两个值都应该以{{1​​}}开头,以表示类选择器。试试这个:

closest()

Working example

答案 1 :(得分:0)

而不是

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

使用

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

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

在JS代码的第4行..

答案 2 :(得分:0)

引用表单ID

form = $('#addressDetails');

你也可以在form.Serialize()上发出警告,看看它可能与你的方法所期望的对象不匹配的输出。

您还可以使用

构建数据
data:'{lAddress: form.lAddress.val(), pAddress: form.pAddress.val()}'