Django 形式的 Ajax答案

【问题标题】：Ajax in django formDjango 形式的 Ajax
【发布时间】：2021-04-23 20:51:09
【问题描述】：

当我使用 change 并且输入是复选框时，我的 Ajax 请求正常工作，但是当我使用输入类型提交时，我的 Ajax 请求不起作用！！

我想在输入提交中输入我的类型，当我这样做时，Ajax 请求将不起作用并且页面将重新加载。

  $(document).on('change','.filter-form',function(event){
       event.preventDefault();
       $.ajax({
       type:'GET',
       url:'filter/',
       data : $(this).serialize(),
       dataType: 'json',
       success: function (data) {
       $('#product-main').html(data['form']);
       },
       error: function (data) {
       alert("error" + data);
       }
    });
});

my form :

<form action="" class="filter-form">
        <input type="submit" name="price" value="new">
        <input type="submit" name="discount" value="discount">
        <input type="submit" name="old" value="old">
</form>

【问题讨论】：

标签： javascript jquery django ajax

【解决方案1】：

我认为提交按钮不会触发更改事件，因此您必须听取其他内容，.serialize() 也不会给您提交按钮的名称/值对。
使用按钮上的点击事件并使用元素属性来获取要发布的数据。

$(document).on('click','.filter-form input[type=submit]',function(event){
   event.preventDefault();
   $.ajax({
     type:'GET',
     url:'filter/',
     data : {[this.name]: this.value}
     dataType: 'json',
     success: function (data) {
       $('#product-main').html(data['form']);
     },
     error: function (data) {
       alert("error" + data);
     }
  });
});

【讨论】：

【解决方案2】：

首先添加了一个clicked 属性来标识点击了哪个提交。然后使用 clicked 属性获取提交的value & name 传递到表单提交事件处理程序中。

$(document).ready(function(){

    // To identify which submit is clicked.
    $("form.filter-form input[type=submit]").click(function() {
        $("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
        $(this).attr("clicked", "true");
    });

    // Form submit event handler
    $("form.filter-form").submit(function(event) {
        event.preventDefault();
        $clickedInput = $("input[type=submit][clicked=true]"); 
        dataString = {[$clickedInput.prop('name')]: $clickedInput.val()};
        console.log('dataString', dataString);

        $.ajax({
           type:'GET',
           url:'filter/',
           data : dataString,
           dataType: 'json',
           success: function (data) {
               $('#product-main').html(data['form']);
           },
           error: function (data) {
               console.log("error" + data);
           }
        });
    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form class="filter-form">
    <input type="submit" name="price" value="new">
    <input type="submit" name="discount" value="discount">
    <input type="submit" name="old" value="old">
</form>

【讨论】：

@django68 不胜感激，如果您也可以对答案进行投票，因为它也是正确的。