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

Posted 2023-05-09

【中文标题】模态表单上的 jQuery submit() vc click()

【英文标题】：jQuery submit() vc click() on Modal Form

【发布时间】：2019-01-29 01:52:24

【问题描述】：

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

【问题讨论】：

如果您共享两个选项代码会更容易回答。问题可能出在很多地方。

两者是相等的，除了使用的函数：$('button#ajaxSubmit').**click**(function(e) ... to $('button#ajaxSubmit').**submit**(function(e)

你能分享你的html

好的，刚刚编辑了问题。

我相信我刚刚发现了一个“错误”。以前， '' 是一个 '' 。所以，针对前一个 '' 的 jQuery '$('button#ajaxSubmit')' 也应该更改为 '$('input#ajaxSubmit')' 或 '$('#ajaxSubmit')' ，对吗？

【参考方案1】：

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

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

代替：

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

【讨论】：

f-CJ，我测试了两者，不同的行为仍在继续。需要注意的是，这两个函数的表单都是由 Controller 提交和执行的。问题出现在返回/响应处理中。