e.preventDefault 不适用于 laravel 5.7

Posted 2023-03-14

【中文标题】e.preventDefault 不适用于 laravel 5.7

【英文标题】：e.preventDefault not working on laravel 5.7

【发布时间】：2019-06-01 10:20:12

【问题描述】：

我正在做聊天应用程序 Laravel 5.7，并遇到了 jQuery AJAX 功能的挑战。

我正在使用 php 7.1.9 版本和 jQuery 3.x 版本。

这是我的 AJAX 请求表单：

<form action="/channels/$channel->id" method="POST">
  <input type="hidden" name="_token" value=" csrf_token() " />
  <input type="hidden" name="user_id" value="Auth::user()->id" />
  <input type="hidden" name="channel_id" value="$channel->id" />
  <input type="hidden" name="user" value="Auth::user()->name" />
  <input type="text" name="msg" class="form-control msg" />
  <input type="submit" value="Envoyer" class="btn send-msg" />
</form>
<script type="text/javascript">
  $(document).ready(function() 
    $.ajaxSetup(
      headers: 
        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
      
    );
    $(".send-msg").click(function(e) 
      e.preventDefault();
      var user_id = $("input[name='user_id']").val();
      var channel_id = $("input[name='channel_id']").val();
      var user = $("input[name='user']").val();
      var msg = $("input[name='msg']").val();
      $.ajax(
        type: "POST",
        url: "/channels/$channel->id",
        data: 
          msg: msg,
          user: user,
          channel_id: channel_id,
          user_id: user_id
        ,
        success: function(data) 
          alert(data.success);
        
      );
    );
  );
</script>

还有我的 PHP 代码：

public function sendmessage(Request $request)
  $message = new Messages();
  $message->channel_id = $request->channel_id;
  $message->user_id = $request->user_id;
  $message->username = $request->user;
  $message->message = $request->msg;
  $message->save();
  return response()->json(['success'=>'Got Simple Ajax Request.']);

通常，它应该发布带​​有数据的警报，但实际上，它会将我重定向到 /channels/id 和 json : success: Got Simple Ajax Request

我做错了什么，我该如何解决？

【参考方案1】：

由于您仅将event 处理程序附加到submit 按钮，当其他事件（例如在更改输入值后按下enter 键）被触发时，您的表单仍将遵循表单提交的默认行为。

要解决这个问题，最好不要将事件侦听器附加到按钮上，而是在表单本身上侦听submit 事件。

这将涵盖表单submit 和按钮click 事件。

$("form").on('submit', function(e)
    e.preventDefault();
    // if e.preventDefault() doesn't work, try `return false`

    // your remaining code here
);

【讨论】：

你可以在submit处理程序中尝试return false;，而不是e.preventDefault()，看看它是否有效。

您还可以删除输入类型提交并添加一个简单的跨度或具有 onclick 属性的按钮。

即使返回 false；我遇到了同样的问题，

【参考方案2】：

我终于找到了解决方案！它不是来自 ajax 而是表单，事实上在我的表单中我有这个：

<form action="/channels/$channel->id" method="POST">

我把它替换为

<form>

现在它可以完美运行了！谢谢大家 ！爱你！