Laravel，ajax提交后更新字段

Question

我正在制作一个小型的点赞系统。我已经成功地进行了一个Ajax请求，将row.like增加1，并将其保存到我的数据库中。现在，在进行Ajax请求的同一页面上，我想要在每次Ajax请求之后更新该字段的值。现在我的问题是，在看到1而不是标准的0之前，我需要刷新页面。

Ajax请求

$.ajax({
    url:"articles" ,
    type: "post",
    data: {
        'user_id':userid[0].value,
        'article_id':articleid[0].value,
        'user_id_fk':useridarticle[0].value,
        '_token': token[0].value
    },
    success: function(data){
        console.log(data);
    }
});

查看 article/index.blade.php 文件

@foreach($articles as $article)

          <div class="work-container">
              <article class="work-item">
                  <a href="{{action('HomeController@showArticle', [$article->id, $article->title])}}" class="work-thumbnail">
                      <img src="/articlePics/{{$article->image}}" alt="work-item">
                  </a>
                  <div class="work-info">
                      <span class="user">{{$article->title}}</span>
                      <div class="actions">
                          <form id="actionForm" action="" method="post" role="form">
                              <input type="hidden" name="articleId" value="{{$article->id}}">
                              <input type="hidden" name="userIdFk" value="{{$article->user_id}}">
                              <input type="hidden" name="userID" value="{{Auth::id()}}">
                              <input type="submit" name="like" class="likeBtn" id="test" value="Like">
                              <input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
                          </form>
                          <span class="likes" name="currentLikes">{{$article->likes}}</span>
                      </div>

                  </div>
              </article>
          </div>
      @endforeach

控制器

if(Request::ajax()) {
        $data = Input::all();
        $user_id =  Auth::id();
        $article_id = Input::get('article_id');
        $user_id_fk = Input::get('user_id_fk');
        $results = DB::select( DB::raw("SELECT * FROM likes WHERE user_id = '$user_id' AND article_id = '$article_id'") );
        $likedOrNot = DB::table('likes')
                ->where('article_id', $article_id)
                ->where('user_id', $user_id)
                ->pluck('likes');

        $currentLikesDB = DB::table('articles')->where('id', $article_id)->pluck('likes');
        echo json_encode(['likesnumber' => $currentLikesDB]);

我希望在ajax提交后，将最后一个span标签的内容替换为当前提交的数据。

- Sara Barrera Riano

---

你需要传递一个编码后的 counted currentLikes 值，然后在 success:function(data) 中，你可以通过 $('.likes').text('data.name_of_field_you_passed') 来访问它。 - Narendrasingh Sisodia

不要仅从控制器中回显。您需要设置标题。在Laravel中正确的方法是return Response::json(['likesnumber' => $currentLikesDB]);。 - rdiz

未定义的方法 Illuminate\Http\Response::json() 的调用 - Sara Barrera Riano

Answer 1

尝试:

在文章中使用json_encode回显点赞数量。

$currentLikesDB = DB::table('likes')->where('article_id', $article_id)->first();
$likesnumber = $currentLikesDB->likes;
return json_encode(['likesnumber' => $likesnumber]);

然后是Ajax：

$.ajax({
    url:"articles" ,
    type: "post",
    data: {
        'user_id':userid[0].value,
        'article_id':articleid[0].value,
        'user_id_fk':useridarticle[0].value,
        '_token': token[0].value
    },
    success: function(data){
        $('.likes').html(data.likesnumber);
    }
});

- Peter Kota

---

likesnumber未被识别，这是我在控制器中添加的代码： $currentLikesDB= DB::table('likes') ->where('article_id', $article_id) ->pluck('likes'); echo json_encode(['likesnumber' => $currentLikesDB]); - Sara Barrera Riano

请在成功后控制台记录数据：console.log(data);你得到了什么回执？ - Peter Kota

那就不要使用pluck()方法。我修改了我的答案。 - Peter Kota

明白了。我的数据已经是一个对象了，不需要解析它。JavaScript 解释器已经为我解析了它。非常感谢！ - Sara Barrera Riano

@SaraBarreraRiano 不要忘记在stackoverflow上标记正确的答案，这样其他人也可以解决类似的问题。 - Jorre

Answer 2

在您的 AJAX 请求中，将总计数作为 JSON 返回，并在您的 AJAX 成功函数中编写以下内容。

success: function(data){
$('.likes').html(data.likesCount);
    }

- Milan Maharjan

Answer 3

在您的控制器中，在执行所需任务后，发出查询以获取计数。

然后在json_encode()中回显。

在ajax success()中，您可以使用解析数据并添加到任何位置。

如果您只想获取一个值，则不需要json_encode()。

直接回显该值并在ajax success()中使用。

- Niranjan N Raju