Question

我不了解有关Laravel的有关Ajax的知识。我正在尝试建立一个已经建立的类似系统。问题是;当您单击“赞”按钮时，整个页面都会刷新。但是我希望它是动态的。为此，我需要使用Ajax和jQuery

我尝试构建jQuery函数，但是我不知道如何解析{id}

您能告诉我在哪里可以了解更多有关该主题的信息？也许是教程，或者您可以向我解释一下我所缺少的部分。

$('.like').on('click', function(event) {
console.log("clicked the button");

$.ajax({
    method: 'POST',
    url: /{id}/addlike
  })
});

这是个类似按钮：

<form action="/{{$new->id}}/addlike" method="post">
                    @csrf
                    <button value="{{$new->likes}}" class='like' type="submit"><i class="fas fa-fire"></i></button>
</form>

这是一条类似的路线：

Route::post('/{id}/addlike', 'ImageController@like');```

这是“赞”控制器

public function like($id)
{
    $picture = ImageModel::find($id)->increment('likes');

    return back();
}

Answer 1

删除type='submit'它将重定向您的页面，只需添加type="button"，在.like function()中，ajax应该是这样的，如果有其他情况，请始终应用if和else条件，以防出现错误。反映在您的浏览器控制台上。

$.ajax({                                                            
                type: "POST",                                                                                                                      
                url: Apiurl,
                data: {
                   "_token": "{{ csrf_token() }}",
                        "id": id
                  }
                success: function (data) 
                {
                    if(data.status ==  'success' )
                    {
                       //apply your condition 
                    }
                    else
                    {
                       console.log('error');                            
                    }                            
               } 
           });

Answer 2

您可以在ajax函数中传递数据，例如数据：{id：yourid，name：somename}，还可以像这样将laravel变量值分配给js：

var testId = '{{$yourid}}'

因此，在您的情况下，您可以使诸如testId +'/ addlike'之类的网址，也始终使id或其他动态事物像'addlike /'+ testId之类的结尾。

$('.like').on('click', function(event) {
console.log("clicked the button");

var id = '{{$yourId}}'

$.ajax({
    method: 'POST',
    url: id + '/addlike'
  })
});

希望有帮助

Answer 3

不添加

return back();

在您的控制器中，您可以使用

return response()->json(['success' => 'Liked']);

或您要在其中输入的任何内容，以ajax形式传递数据。不要在帖子中添加操作，而是可以使用隐藏的输入将id放在其中并调用它（如果您使用的是jQuery）

$('input [name=nameofhidden]').val();

然后在您的Ajax中添加成功以及更新数据后要执行的操作。

var id = $('input[name=nameofhidden]').val();
$.ajax({
    method: 'POST',
    url: '/'+id+'/addlike',
    success: function(ifyouhavedata){
     //what you want to do
    }
  })

Answer 4

您需要返回false的JavaScript逻辑，因此它将停止重定向。参见下面的代码。

$('.like').on('click', function(event) {
    console.log("clicked the button");

    var id = '{{$yourId}}'

    $.ajax({
       method: 'POST',
       url: id + '/addlike'
    });

   return false;
});

控制器应按如下所示返回

return response()->json(['success' => 'Liked'],200);

使用Laravel，Ajax和jQuery的“类似”系统

4 个答案: