Javascript jQuery submit（）vc单击（）模式表单

我在一个引导模式中有一个表单，2个文本输入和一个提交按钮。我想将表单数据发送到Laravel控制器，而不刷新当前页面（显示模式）

首先，我使用了jQuery click（）函数，它实现了我所期望的功能（发送数据、执行控制器、返回JSON，并使用成功/错误规则计算JSON，并且没有刷新）

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

为什么这两个函数之间会出现这种不同的行为

JS-使用click（）：

JS-with submit（）：

同上，但有所改变

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

到

HTML

标题
X
{{csrf_field（）}}
你的问题是什么？
链接选项
提交

您必须将提交事件处理程序附加到

表单

HTML元素，而不是按钮，因为引发提交事件的是

表单

元素，而不是按钮。所以你应该这样做：

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

而不是：

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

---

如果您共享这两个选项代码，回答起来会更容易。这个问题可能出现在很多地方。两者都是相同的，除了使用的函数：

$（'button#ajaxSubmit'）.*单击**（函数（e）

…到

$（'button#ajaxSubmit'）.*提交**（函数（e）{

你能分享你的htmlSure吗，刚刚编辑了这个问题。我相信我刚刚发现了一个“错误”。以前，“”是一个“”。因此，针对上一个“”的jQuery“$（'button#ajaxSubmit'）”也应更改为“$（'input#ajaxSubmit'）”或“$（'ajaxSubmit'）”'对吗？f-CJ，我测试了这两个函数，不同的行为仍在继续。需要注意的是，对于这两个函数，表单都是由控制器提交和执行的。返回/响应处理出现了问题。

    <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>

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

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