return false не работает с использованием формы ajax

Question

Я начал использовать larvel для небольшого проекта, и я пытаюсь отправить свою форму, используя jQuery и Ajax, но похоже, что возврат false не работает, когда я отправляю форму.

Что мне делать, пожалуйста

Это мой код:

$(document).ready(function(){
$('#ajax').submit(function(){
    var endPoint = $(this).attr('action'); 
    var formData = new FormData();
    formData.append('resume', 'a.pdf', 'b.pdf');
    $($(this).serializeArray()).each(function(i, field){
        formData.append(field.name, field.value);
    });
    $.post(endPoint, formData, function(){
        alert(11)
    }, 'json');
    return false;
  });
 });

Это мой Html

<form id="ajax" action="{{ route('upload-resume') }}" enctype="multipart/form-data">
                @csrf
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <div class="form-group">
                            <label>Curriculum Vitae</label>
                            <div class="input-group">
                                <div class="custom-file">
                                    <input type="file" name="resume" class="custom-file-input" />
                                    <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <div class="form-group">
                            <label>Summary</label>
                            <textarea name="d" class="form-control resume height-120" placeholder=""></textarea>
                        </div>
                    </div>
                </div>
                <div class="row mrg-top-30">
                    <div class="col-md-12 col-sm-12">
                        <div class="form-group text-center">
                            <button type="submit" class="btn-savepreview"><i class="ti-angle-double-right"></i>Submit</button>
                        </div>
                    </div>
                </div>
            </form>

Answer 1

Если вы хотите предотвратить отправку формы и избежать перезагрузки страницы, вам просто нужно перехватить событие отправки в переменной и использовать его preventDefault() метод:

$('#ajax').submit(function(event) {
  event.preventDefault();

  // Your code goes here
});

Я бы также рекомендовал предоставить хороший UX, позволяющий пользователям узнать, что что-то происходит в фоновом режиме. Примерно так:

const $submitButton = $('.btn-savepreview');

$('#ajax').submit(function(event) {
  event.preventDefault();

  $submitButton.addClass('loading');

  $.ajax({
    // make your call here
  })
  .always(() => {
    $submitButton.removeClass('loading');
  });
});

И затем вы можете соответствующим образом оформить свою кнопку отправки, изменив ее метку, добавив счетчик и т.д. c.

Answer 2

Попробовать

$("#ajax").submit(function(event){
        event.preventDefault(); 
    var post_url = $(this).attr("action"); //get form action url
    var request_method = $(this).attr("method"); //get form GET/POST method
    var form_data = new FormData(this); //Encode form elements for submission
    
    $.ajax({
        url : post_url,
        type: request_method,
        data : form_data,
    contentType: false,
    processData:false,
    
    }).done(function(response){
     
        
          alert("posted");
    });
    
  });
  

Answer 3

Прежде всего удалите действие action = "{{route ('upload-resume')}}" и используйте event.preventDefault(). Поскольку вы отправляете форму с использованием ajax, тогда вы не можете отправить форму таким образом. Создайте маршрут для сохранения и передайте имя маршрута в запросе ajax таким образом. $. ajax ({url: '{{route (' upload-resume ')}}', тип: "GET", data: new FormData () ;, success: function (response) {

}});