通过 laravel 控制器使用带有 jquery 和 ajax 的单个按钮来关注和取消关注

Question

我有两个控制器分别用于关注和取消关注。我想设计一个按钮，该按钮将在网站的许多地方使用，具有跟随 - 取消关注 - 跟随动作。

我的意思是当用户关注时，它将被声明为关注，直到悬停效果调用，否则它会说关注，当悬停时，如果已经关注或继续关注选项，则会取消关注。

这就是按钮外观的细节。现在，当我开始实施时，我可以在完成检查的地方进行单个控制器调用（通过从互联网获得一些帮助）。但我想为两个不同的动作调用两个不同的控制器。

like for follow-> {{ action('FollowsController@show', 'id'); }} 

取消关注

{{ action('FollowsController@destroy', 'id'); }}

这里显示的是 post 方法，destroy 有删除操作。

在这里，我在代码中提供了完整的操作：尽管这段代码并没有给出我想要的东西。

<script type="text/javascript">
//Changes the Following text to Unfollow when mouseover the button 
$(document).ready(function()
{
    $('.following').hover(function()
    {
        $(this).text("Unfollow");
    },function()
    {
        $(this).text("Following");
    });
 });

 //Perform the Following and Unfollowing work
function follow_or_unfollow(id,action)
{
    var dataString = "id=" + id;
    $.ajax({  
        type: "POST",  
        url: "{{ action('FollowsController@show', 'id'); }}",  
        data: dataString,
        beforeSend: function() 
        {
            if ( action == "following" )
            {
                $("#following"+id).hide();
                $("#loading"+id).html('<img src="loading.gif" align="absmiddle" alt="Loading...">');
            }
            else if ( action == "follow" )
            {
                $("#follow"+id).hide();
                $("#loading"+id).html('<img src="loading.gif" align="absmiddle" alt="Loading...">');
            }
            else { }
        },  
        success: function(response)
        {
            if ( action == "following" ){
                $("#loading"+id).html('');
                $("#follow"+id).show();

            }
            else if ( action == "follow" ){
                $("#loading"+id).html('');
                $("#following"+id).show();
            }
            else { }
        }
    }); 
}
</script>

            @if(0)

            <span id="loading {{ $topdebater->id }}"></span>
            <button class="btn btn-lg btn-danger button following" id="following {{ $topdebater->id }}" onClick="follow_or_unfollow({{ $topdebater->id }},'following');">Following</button>

            <span style="display:none;" class="btn btn-lg button follow" id="follow {{ $topdebater->id }} ?>" onClick="follow_or_unfollow({{ $topdebater->id }},'follow');">Follow</span>

            @else

            <span id="loading{{ $topdebater->id }}"></span>
            <button class="btn btn-info button follow" id="follow{{ $topdebater->id }}" onClick="follow_or_unfollow({{ $topdebater->id }},'follow');">Follow</button>

            <span style="display:none;" class="button following" id="followingfollow{{ $topdebater->id }}" onClick="follow_or_unfollow(follow{{ $topdebater->id }},'following');">Following</span>

            @endif

我是 ajax 的新手。虽然努力学习。我需要你支持这项研究。提前致谢。

Answer 1

你已经尝试过这样的事情了吗？

function follow_or_unfollow(id,action)
{
    if ( action == "following" ){ // I'm not sure for the condition, it depends of its meaning.
        myUrl = "{{ action('FollowsController@show', 'id') }}" ;
        myMethod = "GET";
    } else {
        myUrl = "{{ action('FollowsController@destroy', 'id') }}" ;
        myMethod = "DELETE";
    }
    var dataString = "id=" + id;
    $.ajax({  
        type: myMethod ,  
        url: myUrl,  
        data: dataString,

        // The remaining code...

它不起作用，但给我生成的 URL。然后我们要根据the documentation让它们对应到控制器表。

我认为 HTTP 删除方法会是一个问题，但我希望它可以通过参数绕过（比如表单）。 EDIT : finally DELETE method works directly。

Answer 2

部分发现了问题的解决方案。但还有很长的路要走。 控制器中显示方法的第一次执行可以通过转到获取控制器本身的特定页面的链接来完成....

like if {{ action('FollowsController@destroy', 'id') }} 获取这样的链接 http://localhost/blabla/id

那么我们必须获取

 if( action == "follow" ) {
        myUrl = "http://localhost/blabla/"+id;
        myMethod = "GET";
    }

导致js中的controller调用无法解析，需要通过js变量获取。

到此为止

但在删除方法的情况下，调用的链接是什么仍然是一个问题。当我得到那个答案时，我会尝试在这里发布....谢谢！

myUrl = "{{ action('FollowsController@destroy', 'id') }}" ;