JQuery 表单 ajaxSubmit 不起作用答案

【问题标题】：JQuery Form ajaxSubmit is not workingJQuery 表单 ajaxSubmit 不起作用
【发布时间】：2013-09-16 20:54:09
【问题描述】：

我有一个文件上传表单，我想使用 JQuery 表单通过 Ajax/iframe 提交。当它很简单时，我让它工作，但现在我添加了更多，它不起作用。

我的表单设置为当您单击字段标签时，会弹出文件上传对话框。当您选择一个文件时，将提交表单。我收到警报说“已更改！”和“准备！”，然后什么都没有。

我已尝试使用 Safari 的开发人员工具对其进行调试，但我看不出有什么问题。我尝试使用 ajaxForm 而不是 ajaxSubmit，但没有任何区别。没有报告任何问题，我也没有看到任何错误。

这是我的表单（它是 Django 模板的一部分，但我已将实际的标签和输入放入其中，以便您查看它的外观）：

<form action="{% url "edit_profile_section" user_id=end_user.pk section=section %}" method="POST" enctype="multipart/form-data" id="picture_form" encoding="multipart/form-data">
    {% csrf_token %}
    <label class="edit-profile-picture" for="id_profile_picture"><span>Edit Profile Picture</span></label>
    <input id="id_profile_picture" name="profile_picture" />
    <button type="submit" name="picture_form" id="picture_form_submit">Save</button>
</form>

这是 JavaScript：

<script src="/static/js/jquery-1.10.2.min.js"></script>
<script src="/static/js/jquery.form.js"></script>
<script>
    $(document).ready(function() {
        var options = {
            iframe: true,
            dataType: 'json',
            beforeSubmit: showPopup,
            success: editImage
        }
        $('#id_profile_picture').change(function() {
            alert('changed!');
            $('#picture_form').ajaxSubmit(options);
        });
    function showPopup(formData, jqForm, options) {
            alert('preparing!');
            return true;
        }
        function editImage(responseText, statusText, xhr, $form) {
            alert('status:' + statusText + ', response:' + responseText);
        }
    });
</script>

【问题讨论】：

标签： jquery ajax forms jquery-forms-plugin

【解决方案1】：

我希望您包含 ajaxSubmit 的 javascript 文件，因为它不是核心 jQuery 方法。 ajaxSubmit.js

【讨论】：

【解决方案2】：

在您的选项变量中定义 type: "POST"。

所以使用如下代码：-

var options = {
        iframe: true,
        type: "POST",
        dataType: 'json',
        beforeSubmit: showPopup,
        success: editImage
    }

【讨论】：

当我从 jQuery 1.9 升级到 1.10 时，添加 type: "POST" 为我修复了这个问题

【解决方案3】：

事实证明，我的部分代码没有问题，而问题出在其他地方。页面上有多个表单，在我的 Django 代码中，我通过提交按钮的名称将它们区分开来，所以它不起作用，因为我绕过了提交按钮。我将提交按钮名称添加到ajaxSubmit 的data 选项中，现在它工作正常。不过感谢您的帮助！

【讨论】：