模态表单上的 jQuery submit() vc click()

Question

我在 Bootstrap Modal 中有一个表单、2 个文本输入和一个提交按钮。我想在不刷新当前页面（出现 Modal 的地方）的情况下将表单数据发送到 Laravel 控制器。

首先，我使用了 jQuery click() 函数，它完成了我的预期（发送数据、执行控制器、返回 JSON，并使用成功/错误规则评估 JSON，并且不刷新）。

当我将代码更改为 jQuery submit() 函数时，数据已发送，控制器执行它，返回 JSON，但现在浏览器显示 JSON 纯文本。没有执行成功/错误中的代码。

为什么这两个函数之间会发生这种不同的行为？

JS - 使用 click() ：

$(document).ready(function(){
        $('button#ajaxSubmit').click(function(e){


        e.preventDefault();

        $.ajaxSetup({
            headers: {
            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
            }
        });
        jQuery.ajax({
            url: "{{ url('/question') }}",
            method: 'POST',
            data: $('#form_pergunta').serialize(),
            success: function(result){
                $('#form_pergunta')[0].reset();
                $('#myModal_Pergunte').modal('hide');
                msgbox_Text = "Sua pergunta foi incluída com sucesso!" ;
                $("#msgbox_alertmsg").append(msgbox_Text);
                $('#myModal_MsgBox').modal('show');
            },
            error: function (data, textStatus, errorThrown) {
                console.log(data);
            },
        });
    });
});

JS - 使用 submit():

同上，只是改了

 $('button#ajaxSubmit').click(function(e)  

到

$('#form_pergunta').submit(function(e)

HTML

    <div class="modal fade bd-example-modal-lg" id="myModal_Pergunte" tabindex="-1" role="dialog" >
  <div class="modal-dialog modal-lg">

     <!-- Modal content-->
     <div class="modal-content">
        <div class="modal-header">
           <h5 class="modal-title">Title</h5>
           <button type="button" class="close" data-dismiss="modal">X</button>
       </div>
       <div class="modal-body">

        <form method="POST"  action="{{ url('/question')}}" id="form_pergunta">
            {{ csrf_field() }}

            <div class="form-group">
             <label for="formGroupTextArea">What is your question? </label>
             <textarea type="text" class="form-control" id="formGroupTextArea" placeholder="Faça sua pergunta utilizando até 250 caracteres." rows="8" maxlength="250" name="form_question" required></textarea>
             <h6 class="float-right pt-1 text-muted" id="count_message"></h6>

         </div>
         <div class="form-group">
             <label for="formGroupInputUrl">Link opcional</label>
             <input type="text" class="form-control" id="formGroupInputUrl" placeholder="Caso deseje, inclua um link que faça referência a pergunta" name="form_url" maxlength="250">
         </div>
     </div> 
     <div class="modal-footer">
         <input type="submit" class="btn btn-primary" name="btn_submit" id="ajaxSubmit" >Submit</button>
     </div>

     </form>
</div>
</div>
</div>

Answer 1

您必须将提交事件处理程序附加到您的form HTML 元素，而不是按钮，因为引发提交事件的是form 元素，而不是按钮。所以你应该做这样的事情：

$('#form_pergunta').submit(function(e) { ... }

代替：

$('button#ajaxSubmit').submit(function(e){ ... }