Laravel / AJAX Like 按钮错误：请求失败，状态码 404

Posted 2023-03-14

【中文标题】Laravel / AJAX Like 按钮错误：请求失败，状态码 404

【英文标题】：Laravel / AJAX Like Button Error: Request failed with status code 404

【发布时间】：2019-03-05 01:59:26

【问题描述】：

我对 Laravel、AJAX 等非常陌生。我是一名从事 Twitter 类型项目的学生，这是我提出的第一个堆栈问题。我试图寻找答案，但我的老师帮助我的代码与其他示例非常不同。我很确定我的问题出在我的“推文控制器”中的不同方法......非常感谢任何帮助！希望我已经提供了足够的信息，并希望这可以在未来对其他人有所帮助:)

这是我的错误：[1]：https://i.stack.imgur.com/zkxsd.png

POST http://localhost:8000/tweets/19/unlike 404 (Not Found)
Uncaught (in promise) Error: Request failed with status code 404
at createError (app.js:14253)
at settle (app.js:35706)
at XMLHttpRequest.handleLoad (app.js:14127)

这是我的喜欢表/迁移

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateLikesTable extends Migration

/**
 * Run the migrations.
 *
 * @return void
 */
public function up()

    Schema::create('likes', function (Blueprint $table) 
        $table->increments('id');
        $table->integer('tweet_id');
        $table->integer('user_id');
        $table->timestamps();
    );


/**
 * Reverse the migrations.
 *
 * @return void
 */
public function down()

    Schema::dropIfExists('likes');

这是我的推文控制器

public function like($id)


     $like = Like::create([
         'user_id'=>auth()->id(),
         'tweet_id'=> $id

     ]);
     if($like)
         return json_encode(array('status' => 'success'));

     
     return json_encode(array('status' => 'failed'));

 

 public function unlike($id)
     $like = Like::delete([
         'user_id'=>auth()->id(),
         'tweet_id'=> $id

     ]);

    if($like)
        return json_encode(array('status' => 'success'));
    

这是我的网络路由

Route::post('tweets/tweet/like', 'TweetController@like');
Route::delete('tweets/tweet/like', 'TweetController@unlike');

这是我的模特

    public function likes()
    return $this->hasMany(Like::class);


public function likedByCurrentUser()
    $userId=auth()->id();

    //like boolean
    $like = $this->likes->first(function($v) use ($userId)
        //$v is a reference to the single like
        return $v->user_id == $userId;
    );

    //if the user has liked a post
    if($like)
       return true;
   
   return false;

这是我的 Vue 组件：

<script>
export default 
    name: 'likeButton',
    props: ['likeCount','hasLiked','tweetId','csrf'],

     mounted()
         this.dataLikeCount = this.likeCount;
         this.dataHasLiked = this.hasLiked;
     ,
        data()
            return
                dataLikeCount:0,
                dataHasLiked:false

            
        ,

        methods:
            doLike()
                var type='like';

                if(this.dataHasLiked)
                    type='unlike'
                

                axios(
                    method:'POST',
                    url:'/tweets/' + this.tweetId + '/'+ type,
                    headers:
                        'X-CSRFToken':this.csrf
                    ,
                    json: true

                    ).then((response) => 
                        if(response.data.status == 'success')
                            // response was successful (regardless of type)
                            return true
                            // if type is like
                                // add one to like count, set hasLiked to true
                                if(type == 'like')
                                    this.dataLikeCount++
                                
                            // if type is unlike
                                // deduct one from like count, set hasLiked to false
                                if(type =='unlike')
                                    return false
                                    this.dataLikeCount--
                                
                        
                    );
                
            
        
</script>

<template>
<div>
    <button type="submit"
    :class="'btn btn-link':dataHasLiked"
    @click="doLike">

          <i class="star"></i>
          Like  dataLikeCount 

    </button>
</div>


</template>

【问题讨论】：

你能分享你的浏览器调试控制台网络吗

我编辑了我的帖子。这有帮助还是您需要更多？对不起，就像我说的，这是新手。当您单击错误链接时，它显示的与网络选项卡中的不同，然后是一大堆提到路由的东西。

【参考方案1】：

您没有与unlike 匹配的路由。

改变

Route::delete('tweets/tweet/like', 'TweetController@unlike');

到

Route::delete('tweets/tweet/unlike', 'TweetController@unlike');

【参考方案2】：

使用这个

Route::delete('tweets/tweet/unlike', 'TweetController@unlike');

【参考方案3】：

正如@DigitalDrifter 所说，您没有不同的路线。所以需要改变它。

你的路线是这样的

Route::delete('tweets/tweet/unlike', 'TweetController@unlike');

因此必须使用 ajax 使用 DELETE 方法调用此路由。您使用 post 方法进行 ajax 调用。它也会给出方法不允许的错误。

所以改变你的网络路线，

来自

 Route::delete('tweets/tweet/unlike', 'TweetController@unlike');

到

 Route::post('tweets/tweet/unlike', 'TweetController@unlike');

并更改控制器方法中的返回响应，如下所示

推文控制器

public function like($id)


     $like = Like::create([
         'user_id'=>auth()->id(),
         'tweet_id'=> $id

     ]);
     if($like)
         return response()->json(['status' => 'success']);

     
     return response()->json(['status' => 'failed']);

 

 public function unlike($id)
     $like = Like::delete([
         'user_id'=>auth()->id(),
         'tweet_id'=> $id

     ]);

    if($like)
        return response()->json(['status' => 'success']);
    

希望现在有帮助！！

【讨论】：

哦哈哈我忘了把like改成like。我现在有 Uncaught (in promise) 错误：请求失败，状态码 405

是的，因为您的路线是删除方法，并且您正在使用 post ajax 方法调用该路线

所以要么使用 delete 方法进行单独的 ajax 调用，要么更好，我建议将您的路由方法更改为 post

因此，如果我将路由更改为发布，我必须将我的不同控制器方法从 $like = Like::delete 更改为 ?对不起，就像我说我对这个真的很陌生。

无需更改控制器方法，只需更改它的工作路线即可。