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

我尝试使用laravel制作社交媒体应用程序，并在制作过程中使用类似于我在js文件中使用ajax的系统。我有很多有趣的错误，所以我想和大家分享。我真的很无助，我找了一整天。谢谢你的帮助

首先，我尝试获取postId和like状态的数据，但当我对ajax的success函数发出警告时，它看起来没有定义

第二，路由器一般不能post，ajax在测试期间的行为不同。这就是我将代码从mainpage.js移到main.blade.php的方式，但仍然无法正常工作

第三，当我在测试期间关闭控制台并单击ToLike按钮时，页面会自动刷新

这就像我的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>

这是我的web路由器部件：

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");
               }
                  
             
           });
        });
       
       })

---

再次感谢所有帮助

您可以像下面这样修改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>

评论

在阿贾克斯

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

$（文档）.ready（函数（）{
$（'likeButton'）。在（'click'，函数（e）上{
e、 预防默认值（）；
var csrf=$（'meta[name=“csrf token”]'）.attr（'content'）；
var postId=$（this.attr（'data-postId'））
$.ajax({
url:“{route（'post'）}}”，
方法：“POST”，
数据：{u令牌：csrf，postId:postId}，
成功：函数（）{
}
});
})
})

别忘了添加元标记

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

是的，我尝试将其转换为表单。实际上，我只关心id为“likepost”的按钮。我粘贴到我的文件，postcontroller仍然无法运行dd（）函数。加上其中一个按钮，我的post run success函数和alert to ok to me，但其他按钮只是将页面顶部的内容丢弃给我。（我使用刀片和foreach从数据库获取）dd（$request->all（））；同时也要检查你所做的get@Doctorstarter.发布完整的刀片代码。根据我的理解应该是这样的work@Doctorstarter.i已更新代码。这是我的代码错误。再次复制html和jsIt，使其像操作一样工作，但dd（）函数仍然不工作。
<meta name="csrf-token" content="{{ csrf_token() }}" />