为什么 laravel 不能与 ajax 一起正常工作？

Question

我尝试使用 laravel 来制作社交媒体应用程序，并且在制作类似系统的过程中，我在我的 js 文件上使用了 ajax。我遇到了很多有趣的错误，所以我想与您分享所有这些错误。我真的对此感到无助，我搜索了一整天。感谢所有帮助。

1. 首先，我尝试从 postId 和 like 状态中获取数据，但是当我对 ajax 的成功功能发出警报时，它看起来未定义。
2. 其次，路由器一般不能post，测试时ajax行为不同。这样我将代码从 mainpage.js 移动到 main.blade.php 仍然无法正常工作。
3. 第三，当我在测试期间关闭控制台并单击“赞”按钮时，页面会自行刷新。

这就像我的 main.blade.php 的一部分

                       <form id="like" >
                        @csrf
                          <a  value="{{$posts->Id}}"  type="submit"  class="card-link"><i class="fa fa-gittip" ></i> Like</a>
                          <button id="likepost" value="{{$posts->Id}}" type="submit"></button>
                            </form>
                            <a id="showcomments" class="card-link"><i class="fa fa-comment"></i> Comments</a>
                        </div>

这是我在 postcontroller.php 中的函数

function likeposts(Request $request){
  

  dd($request);
   } 

这是我的网络路由器部分：

Route::post('/post', [PostController::class, 'likeposts'])->name('post');

我按照教程（但它不是 laravel-8）所以这是我来自 main.blade.php 的 ajax 部分：

 $(document).ready(function() {
           
           $("#like").submit(function(event){
              // Do global setting.
              event.preventDefault();
              console.log(event);
              var Id=document.getElementById('likepost').value;
              alert(Id);
           var like =like();
              $.ajaxSetup({
               headers: {
                   'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                 }, 
               method:'POST',
               url:"/post",
               data:{ like:like,postId:Id},
              });$.ajax( {
               success:function(data) {
                  alert("ok");
               }
                  
             
           });
        });
       
       })

再次感谢所有帮助！

Answer 1

你可以像下面这样修改html

 <a href="#" data-postid="{{$posts->Id}}" class="card-link likeButton" i><i class="fa fa-gittip"></i> Like</a>


    <a id="showcomments" class="card-link"><i class="fa fa-comment"></i> Comments</a>

在 ajax 中

 <script>
            $(document).ready(function () {
    
                $('.likeButton').on('click',function (e) {
                    e.preventDefault();
                    var csrf = $('meta[name="csrf-token"]').attr('content');
                    var postId=$(this).attr('data-postid')
                    $.ajax({
                        url: "{{route('post')}}",
                        method: 'POST',
                        data: {_token: csrf, postId: postId},
                        success: function () {
                           
                        }
                    });
    
                })
    
         
    
            })
        </script>

别忘了添加元标记

<meta name="csrf-token" content="{{ csrf_token() }}" />