javascript - 使用 jQuery 序列化表单时遇到问题

Question

我一生都无法弄清楚为什么在通过 AJAX 发布之前使用 jQuery 时我的表单不会序列化。

每当我调试 javascript 'formData' 都会产生“”。

我已经尝试过使用硬编码的表单 ID，但它仍然会导致空白序列化，在 $(this) 末尾尝试了 .get(0) > 选择器并尝试在名称中不使用下划线，但没有成功。

在调试选择器时，选择器包含作为子项的输入，并且在输入嵌套在其他元素中之前我已经序列化了表单，没有出现任何问题。

我使用 $(this) 动态选择表单而不是对事件处理程序进行硬编码的原因是，这将成为应用程序的一部分，我们将在其中附加其他表单，因此我喜欢它简洁且可维护。

非常感谢任何见解。

我的代码如下:

HTML/PHP View (使用 CodeIgniter)

<div class="tabs-content">
    <section role="tabpanel" aria-hidden="false" class="content active" id="details">
        <div class="login-form">
            <p class="lead">To change basic personal details such as name and email address use this form.</p>
            <form action="<?php echo base_url() ?>ajax/update_details" method="POST" name="updateDetailsForm" id="updateDetailsForm">
                <div class="row">
                    <div class="small-12 columns">
                        <label>First Name
                            <input type="text" placeholder="e.g. John" name="first_name" value="<?php echo $first_name ?>" />
                        </label>
                    </div>
                </div>
                <div class="row">
                    <div class="small-12 columns">
                        <label>Surname
                            <input type="text" placeholder="e.g. Smith" name="last_name" value="<?php echo $last_name ?>" />
                        </label>
                    </div>
                </div>
                <div class="row">
                    <div class="small-12 columns">
                        <label>Email
                            <input type="email" placeholder="e.g. me@example.com" name="email" value="<?php echo $email ?>" />
                        </label>
                    </div>
                </div>
                <input type="submit" class="button small" value="Update" />
            </form>
        </div>
    </section>
    <section role="tabpanel" aria-hidden="true" class="content" id="password">
        <div class="login-form">
            <p class="lead">You can use the form below to update your account password.</p>
            <p>Passwords must be between 8 and 50 characters in length.</p>
            <form action="<?php echo base_url() ?>ajax/update_password" method="POST" name="updatePasswordForm" id="updatePasswordForm">
                <div class="row">
                    <div class="small-12 columns">
                        <label>Old Password <small>Required</small>

                            <input type="password" name="oldpw" />
                        </label>
                    </div>
                </div>
                <div class="row">
                    <div class="small-12 columns">
                        <label>New Password <small>Required</small>

                            <input type="password" name="newpw1" />
                        </label>
                    </div>
                </div>
                <div class="row">
                    <div class="small-12 columns">
                        <label>Confirm New Password <small>Required</small>

                            <input type="password" name="newpw2" />
                        </label>
                    </div>
                </div>
                <input type="submit" class="button small" value="Update Password" />
            </form>
        </div>
    </section>
</div>

Javascript

$('form').on('submit', (function (e) {
    e.preventDefault();

    var url = $(this).attr('action');
    $(this).html(loadingHTML);

    var formData = $(this).serialize();

    $.ajax({
        type: 'POST',
        url: url,
        data: formData,
        done: function (data) {
            $(this).html(data);
        }
    });
}));

Answer 1

交换线路

var formData = $(this).serialize();

$(this).html(loadingHTML);