Question

我在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正在正确加载。

Answer 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
       }
    );    

});

Answer 2

原因是，.content实际上是克隆并注入到.popover本身的DOM中。所以submit（）永远不会绑定到popover中显示的表单，因为它稍后会添加。因此，如果我们将事件绑定到文档作为委托事件处理程序，那么它也将使用.popover中显示的表单：

$sorted_data = array(); 
//its key value pair is like [service_name] => array( 0 => array(...),...)
foreach($origin_data as $item) {
    if(isset($sorted_data[$item[service]])) {
        $sorted_data[$item[service]][] = $item;
    }
}

无法使用AJAX提交表单

2 个答案: