event.preventDefault();无法在 ajax post laravel Framework 5.8.17 中工作答案

【问题标题】：event.preventDefault(); not working in ajax post laravel Framework 5.8.17event.preventDefault();无法在 ajax post laravel Framework 5.8.17 中工作
【发布时间】：2019-06-19 07:27:41
【问题描述】：

您好，它通常可以在其他地方使用，但这个特定的 AJAX Post preventDefault() 对我不起作用。

我正在动态获取一些值，我将该值设置为表单的隐藏字段，然后触发 ajax Post 到另一个 ROUTE。

以下是我需要任何帮助或帮助的代码部分。

<!--Init_Form_ST-->
<div style="display:none;">
  <form id="frm_init" name="frm_init" action="{{ route('init_message') }}" method="POST"   >
    {{ csrf_field() }}
    {{ method_field('POST') }}
    <input type="hidden" name="init_messageType" id="init_messageType" value="chatMessage" >
    <input type="hidden" name="init_idempotencyid" id="init_idempotencyid" value="" >
    <input type="hidden" name="init_receveruserid" id="init_receveruserid" value="" >
    <input type="hidden" name="init_lang" id="init_lang" value="" >    
    <?php /*?><input type="submit" name="init_submit" id="init_submit" value="init_sub" ><?php */?>
    <button type="submit" name="init_submit" id="init_submit" ></button>
  </form>        
</div>
<!--Init_Form_EN-->

我尝试了不同的方法来防止表单被提交并导航到另一个页面。

alert("1st Alert - Before Click Trigger");
$("#init_submit").trigger('click');
alert("2nd Alert - After Click Trigger");

$("#frm_init").on('submit', function(event) {
  event.preventDefault();

  alert("3rd Alert - Into submit"); // <== It never comes here

  var init_formdata = new FormData(this);
  var init_msg_route = "{{ route('init_message') }}";

  $.ajax({
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    url: init_msg_route,
    dataType: 'json',
    cache: false,
    async: false,
    type: "POST",
    data: init_formdata,
    contentType: false,
    processData: false,
    success: function(result) {
      alert("Success");
    },
    error: function(jqxhr, status, exception) {
      alert('Exception:', exception);
    }
  });
});

指针转到第一个警报并等待按钮单击。在该指针显示 2nd Alert 之后，但无需等待页面导航到路由路径。

我什至通过删除所有 Ajax 代码进行了测试。但第三次警报永远不会触发

我已经使用以下选项进行了测试

// $("#frm_init").submit(function(event){
// $(document).on("submit","frm_init", function(event) {                                                                
// $(document).on("click","#init_submit", function(event) { 
// $("#init_submit").click(function(event){

【问题讨论】：

尝试添加断点？你的控制台有什么错误吗？
控制台有错误吗？另外，您绝对确定id 选择器是正确的吗？ DOM 中是否有多个具有相同id 的表单？另外，删除async: false。这是一种糟糕的做法，你不需要它
@Viral 尝试 alert("3rd Alert - Into submit"); return false; 并删除 event.preventDefault() ，看看它是否有所作为。
感谢您的快速回复。最多我可以看到@ 1st Alert No console 错误 - 在 2nd Alert 它出现然后重定向到 ROUTE 路径。
@Viral 在网络浏览器中打开您的网站ctrl + U（在 Windows 上）现在搜索名称为 #frm_init 的 id 有多少

标签： jquery ajax laravel-5 preventdefault

【解决方案1】：

我发现了一个愚蠢的错误。我在捕获“提交表单”之前触发“表单提交”

这可能会帮助像我这样可能会犯愚蠢错误的人。感谢大家的帮助。

【讨论】：