使用 ajax 表单返回 false 不起作用

Question

我开始将larvel用于一个小项目，并尝试使用jQuery和Ajax提交我的表单，但是当我提交表单时，似乎 return 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
});

我还建议提供一个好的用户体验，让用户知道在后台发生了一些事情。 像这样：

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

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

  $submitButton.addClass('loading');

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

然后您可以通过更改其 label、添加微调器等来相应地设置您的提交按钮的样式。

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();, 成功: function(response){

} });