Question

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

首先，我使用了jQuery click（）函数，它实现了我期望的功能（发送了数据，执行了Controller，返回了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

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

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

代替：

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

jQuery形式模式上的submit（）vc click（）

1 个答案: