如何在提交表单时禁用重定向到表单操作属性中指定的url

Question

我有一个操作属性设置为"/tasks/“的表单。我想要的是在提交表单时，数据转到"/tasks/"，但是用户不会被重定向到"/tasks/"，他们只是停留在"/“上。有可能实现吗？我试图将"return false“和"preventDefault”添加到"onclick“处理程序中，但这并不是我所需要的，因为它们取消了表单提交。

    <form id="add-task-form" method="POST" name="add-task-form" action="/tasks/" enctype="multipart/form-data">
        <label for="name" class="field-description">*Name</label>
        <input id="name" type="text"required name="name" autofocus="true"><br>
        <label for="description-text" class="field-description">*Description</label>
        <textarea id="description-text"  name="description"></textarea><br>
    <button type="submit" id="save-button" class="saveButton"><span>Add task</span></button>
    </form>

      
     $('#save-button').on( 'click', function(){  
              if($('input').data().length() != 0){ 
                  var data = $('#add-task-form form').serialize();  
                  $.ajax({  
                    method: "POST",  
                    url: '/tasks/',  
                    data: data,  
                    success: function(response){  
                       $('#add-task-form').css('display', 'none');  
                       var task = {};  
                       task.id = response;  
                       var dataArray = $('#add-task-form form').serializeArray();  
                       for(i in dataArray) {  
                          task[dataArray[i]['name']] = dataArray[i]['value'];  
                       }  
                       appendTask(task);  
                       getTasksCount();  
                    }  
                  });  
                  return false;  
                  $('#home-page').show();  
                  $('#add-task-page').remove();  
                };  
            }) 

 

I'm new to js and jQuery and they are definitely not my strongest points, so please, advice.

Answer 1

它应该是这样工作的：

$('#save-button').click(function(event) { 
    event.preventDefault();
    ...
    });

要了解更多信息，请访问https://api.jquery.com/event.preventdefault/

Answer 2

你可以做这样的事情。

$(document).ready(function(){
 var $form = $('form');
   $form.submit(function(){
     $.post($(this).attr('action','/tasks/'), $(this).serialize(), function(response){
        // Do something
     },'json');
     return false;
   });
});

quotation

Answer 3

如果您想要阻止这一切，您可以使用event.preventDefault()。但是，由于您使用的是ajax，并且不想重新加载页面，因此可以尝试应用以下代码：

  $("#save-button").click(function(){
            $.post('{post_url}',
                $("#add-task-form form").serializeArray(),
                function(data){
                    if (data.success){
                        redirect = '{last}';
                    } else {
                        reload(true); 
                    }
                },"json"
                );
        });