javascript - 模态表单上的 jQuery submit() vc click()
问题描述
我在 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 - 使用提交():
同上,但改变
$('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>
解决方案
您必须将提交事件处理程序附加到您的form
HTML 元素,而不是按钮,因为它是form
引发提交事件的元素,而不是按钮。所以你应该做这样的事情:
$('#form_pergunta').submit(function(e) { ... }
代替:
$('button#ajaxSubmit').submit(function(e){ ... }
推荐阅读
- python - 如何在 pygame 上显示随机图片(骰子)并为其赋值?
- configuration - 为什么 Serilog LoggerEnrichmentConfiguration 操作未实现
- php - 在对象数组 (JSON) 中编辑对象的特定键值
- sql - 新列取决于条件sql
- sql-server - 我可以从 MSSQL\Backup 文件夹中手动删除 .log 和 .bak 文件吗?
- angular - 从@angular/http 迁移到@angular/common/http 但无法弄清楚
- javascript - 我可以让我的机器人在离线时在特定的文本通道中发送消息吗?
- java - Do-While 循环打印文本以提示用户输入标记值,然后在接收输入之前重新启动
- php - 无法从 EC2 连接 AWS RDS (MYSQL)
- typescript - 如何在提交时更新或推送 Slack 模式视图?(带螺栓的松弛 API)