Php &引用；例如；使用Laravel、Ajax和jQuery的系统

我不知道Ajax与Laravel的结合。我正在尝试建立一个类似的系统，它已经建立起来了。问题是,；单击like按钮时，整个页面将刷新。但我希望它是动态的。为此，我需要使用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>

这是“喜欢”的控制器

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

    return back();
}

不要加

return back();

在控制器中，您可以使用

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

或者任何您想要在那里输入以在ajax中传递数据的内容。不要将操作放在帖子中，相反，您可以使用隐藏输入将id放在那里并调用它（如果您使用jquery）

然后在ajax中添加成功以及更新数据后要做的事情

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

---

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

var testId = '{{$yourid}}'

因此，在您的例子中，您可以将url设置为testId+'/addlike'，也可以将id或其他动态内容设置为'addlike/'+testId'

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

var id = '{{$yourId}}'

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

---

希望它有助于

JavaScript逻辑，您需要返回false，这样它将停止重定向。请参阅下面的代码

$('.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);

---

删除

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

---

我希望有帮助。url需要引号，{id}不正确，请参阅其他答案以获得正确的格式。哦，是的，我没有注意到这一点。注意，只有当OPs代码在刀片模板中时，这才有效。如果代码在一个单独的JavaScript文件中，这将不起作用。您好，感谢您花时间回复。不幸的是，这不起作用。将“图像”应用到每个对象的一个视图中。所以在foreach循环之外，它不知道唯一的ID是什么。单独的Javascript文件还阻止系统知道{{$yourID}是什么。但是谢谢你和我一起思考。

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

$.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');                            
                    }                            
               } 
           });