无法使用 AJAX 提交表单答案

【问题标题】：Unable to submit a form with AJAX无法使用 AJAX 提交表单
【发布时间】：2015-10-16 00:30:52
【问题描述】：

我在 Django 中有一个网站，我需要一个通过 AJAX 提交的表单，以避免页面重新加载并在后台执行某些操作。但是，我无法做到这一点。

这是我的表单代码：

<a href="#" class="trigger">Request a call back</a>
<div class="head hide">No Phone Number on Record</div>
<div class="content hide">

<form method="post" id="phone-form" action="{% url 'customer:profile-update' %}">
    {% csrf_token %}
    <input type="text" id="id_first_name" maxlength="255" name="first_name"
           value="{% if user.is_authenticated %}{{ user.first_name }}{% endif %}" hidden>
    <input type="text" id="id_last_name" maxlength="255" name="last_name"
           value="{% if user.is_authenticated %}{{ user.last_name }}{% endif %}" hidden>
    <input type="email" id="id_email" maxlength="255" name="email"
           value="{% if user.is_authenticated %}{{ user.email }}{% endif %}" hidden>
    <input type="text" id="id_date_of_birth" maxlength="128" name="date_of_birth"
           value="{% if user.is_authenticated %}{% if user.date_of_birth %}
           {{ user.date_of_birth }}{% endif %}{% endif %}" hidden>
    <div class="form-group has-feedback">
        <label for="id_phone_number">Where do we reach you?</label>
        <input
            id="id_phone_number"
            name="phone_number"
            type="text"
            class="form-control"
            placeholder="772734878">
        <div align="center" style="padding-top: 10px;">
        {% if user.is_authenticated %}
            <small>We will add this number to your profile for future communications.</small>
        {% endif %}
        </div>
    </div>
    <button type="submit" id="id_update_phone_number" class="btn btn-default btn-block">
        Request a Call
    </button>
</form>

</div>

还有 javascript 的代码：

 <script>
$(document).ready(function(){
    $('.ph-in>.trigger').popover({
        html: true,
        placement: 'bottom',
        title: function () {
            return $(this).parent().find('.head').html();
        },
        content: function () {
            return $(this).parent().find('.content').html();
        }
    });

    $('#phone-form').on('submit', function(event){
        event.preventDefault();
        alert("form submitted!")  // sanity check
    });
});
</script>

这里可能有什么问题？ popover 的脚本工作正常，其他与 jQuery 相关的元素也是如此 - 也就是说 jQuery 正在正确加载。

【问题讨论】：

标签： javascript jquery html ajax django

【解决方案1】：

您故意阻止提交。但是您也错过了使用 AJAX 发送表单数据的调用。

在提交时将 jQuery 调用更改为

$('#phone-form').on('submit', function(event){
    event.preventDefault();
    $.ajax(
       url: {% url 'customer:profile-update' %},
       data: $("#phone-form").serialize() 
       success: function {
          alert("form submitted!")  // sanity check
       }
    );    

});

【讨论】：

是的，目前我只想看看对脚本的调用是否有效 - 这就是我阻止提交并显示警报的原因。我的想法是，如果警报显示，我可以开始实现 Ajax 代码。

【解决方案2】：

原因是 .content 实际上被克隆并注入到 .popover 内部的 DOM 中。因此 submit() 永远不会绑定到弹出框内显示的表单，因为它是稍后添加的。因此，如果我们将事件作为委托事件处理程序绑定到文档，那么它也将与 .popover 中显示的表单一起使用：

$(document).on('submit','#id_update_phone_number',function(){
    alert('Form Submitted');
    return false;
});

【讨论】：