Question

这里添加类别表单在另一个添加客户表单内。当我单击添加新类别按钮时，它会弹出一个表单以添加类别标题，在添加标题并提交表单后，我想将此类别放置在没有页面刷新的add_customer表单的category字段。我试图这样做，但无法正常工作。它要求我输入add_customer表单的所有字段。我该如何解决？

views.py

def ajax_add_category(request):
    # if request.method == 'POST':
    #     category_form = AddCategoryForm(request.POST or None)
    #     if category_form.is_valid():
    #         category = category_form.save(commit=False)
    #         category.save()
    #         return redirect('pos:add_product')
    # else:
    #     category_form = AddCategoryForm()
    # return render(request,'pos/add_product.html',{'form':category_form})

    if request.method == 'POST':
       title = request.POST['title']
       Category.objects.create(title=title)
       return redirect('pos:add_product')

urls.py

 path('add-category/', views.ajax_add_category, name='add-category'),

模板

              <button class="btn btn-primary" type="button" data-toggle="modal" data-target="#item-category-modal">Add New Category</button>
                  <div class="modal" id="item-category-modal">
                      <div class="modal-dialog">
                        <div class="modal-content">

                          <div class="modal-header">
                            <h4 class="modal-title">Add new category</h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                          </div>

                          <div class="modal-body">
                            <form method="POST" data-url="{% url 'pos:add-category' %}" id="category-ajax-form">
                            {% csrf_token %}
                              <p><label for="id_title">Title:</label> <input type="text" name="title" class="form-control required" placeholder="Category Title" maxlength="200" required id="id_title"></p>
                              <button class="btn btn-primary mt-30">Add Category</button>
                            </form>
                          </div>

                          <div class="modal-footer">
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                          </div>

脚本

<script type='text/javascript'>
  $(document).ready(function(){
    var $categoryForm = $('#category-ajax-form')
    $categoryForm.submit(function(event){
      event.preventDefault()
      var $formData = $(this).serialize()
var $thisURL = $categoryForm.attr('data-url') 
$.ajax({
method: "POST",
url: $thisURL,
data: $formData,
success: handleFormSuccess,
});
});

    function handleFormSuccess(data, textStatus, jqXHR){
      $("#id_category").append(new Option(data.title, data.pk));

      $('#id_category').val(data.pk);
      $('#item-category-modal').modal('toggle');

// $categoryForm.reset(); // reset form data
}
});
</script>

Answer 1

假设实际的create post调用有效，并且唯一的问题是add_customer正在过早提交，则可以尝试将event.stopPropagation（）添加到Submit函数。

如何在Django中实现Ajax

1 个答案: