Laravel 4 - 使用 Ajax 更新 Div

Question

我正在使用 Laravel 4 并尝试使用从 ajax 请求中检索到的新文章来更新 (#articles) div。当我检查页面并查看 Network 部分时，我可以看到 POST 请求被触发并且它没有显示任何错误（例如，似乎返回了文章）。然而，不幸的是，#articles div 并未使用新信息进行更新。但是，如果我刷新浏览器，就会显示新文章。

Routes.php

Route::any("/dashboard/latest_sa", [
    "as"    => "dashboard/latest_sa",
    "uses"  => "DashboardController@latest_sa"
]);

控制器/DashboardController.php

Class DashboardController extends \BaseController
{
...
   protected function latest_sa()
    {
      if( Request::ajax() )
      {
        // called via ajax
        $articles = Articles::orderBy('published_at', 'desc')->paginate(20);
        return json_decode($articles);
      } 
      else 
      {
        // fresh page load
        $articles = Articles::orderBy('published_at', 'desc')->paginate(20);
        return $articles;
      }
  }
...
}

app/views/dashboard/default.blade.php

...

@section("content")

// defined in /public/js/main.js
<script type="text/javascript">
    callServer();
</script>

<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">

    <h4>Latest Articles</h4>

    <div class="articles">
        <ul>
        @foreach ($articles as $article)
            <li>
                <img src="{{ $article->user_image }}" alt="{{ $article->article_title }}" />
                <a href="{{ $article->article_link }}">{{ $article->article_title }}</a>
                <div class="details">
                    <span class="author">{{ $article->author_name }}</span>
                    <span class="created">{{ Helpers::time_ago($article->published_at) }}</span>
                    <span class="symbol"><a href ="{{ $article->symbol_link }}">{{ $article->symbol_title }}</a></span>
                </div>
            </li>
        @endforeach
        </ul>
    </div>
    {{ $articles->links() }}
</div>

...

/public/js/main.js

function callServer()
{
    setInterval(function(){
        $.ajax({
            type: "POST",
            url: "dashboard/latest_sa",
            success:function(articles)
            {
                $(".articles").html(articles);
            }
        });
    },5000);
}

JS 不是我的强项，所以我不确定我在这里做错了什么。

并且，为了清楚起见，我尝试更新 div 中的所有文章的原因是，Helpers::time_ago 方法也被调用，而不是仅仅获取新文章。这样，它可以正确地显示文章发表了多长时间（例如，不到一分钟前、一分钟前、一小时前、一天前等），而无需刷新页面。本质上，我想用一块石头杀死两只鸟；用最近的文章更新 div，并使用我的 Helpers::time_ago 方法更新剩余文章的 published_at 属性。如果有更有效/更有效的方法来做到这一点，请随时纠正我。这看起来相当粗糙，但由于它仅供个人使用，绝不会用于商业目的，因此很适合我的需求（并不是因为代码不好）。

尽管如此，根据我相当基本的理解，JS 应该执行以下步骤：

1) 向 /dashboard/latest_sa 路由发送 POST 请求

2) 执行DashboardController@latest_sa 操作

3) 返回按最新发布日期排序的所有$articles 的数据库集合，并进行分页

4) 将$articles 集合传回JS 的success 属性（如articles）

5) 使用 articles 集合作为参数触发匿名函数

6) 使用来自articles 集合的结果更新相应的内部 HTML

逻辑听起来是对的，所以我很确定这将是一个人为错误（毕竟 98% 的时间都是这样。哈哈）。希望这里的某个人能够看到逻辑中的（可能是明显的）问题，并为我指明正确的方向。

与此同时，我将继续玩弄它。

我期待您的想法、想法和建议。 TIA。

---

编辑：

嗯，我发现了其中一个问题；文章 div 是一个类，在 JS 中我将其称为 id。我修复了这个问题，现在在 timeInterval 之后，文章的 div 已“更新”，但没有显示任何结果（无、zippo、nadda）。

然而，如果我直接访问 /dashboard/latest_sa URI，我会得到我期望的有效 JSON 响应。所以，虽然我离得更近了，但我仍然缺少一些东西。

---

编辑 2：

好的，在控制器中，我做了一些更改，如上所示，我现在对 $articles 进行 json_decode，然后将它们返回以传递到视图中。有了这个，在 timeInterval 过去后，文章会再次显示，但是，新文章和现有文章的 published_at 不会更新。查看 Inspect -> Network 后，它显示服务器正在响应来自 ajax POST 请求的 500 Internal Server Error。

嗯...好像我在绕圈子。听起来是休息和散步的好时机。 ;)

---

编辑 3：

好吧，我修改了我的 Helpers 类，并在下面的方法中添加了检查 $article 是否为 json 对象。

public static function isJson($string)
{
    json_decode($string);
    return (json_last_error() == JSON_ERROR_NONE);
}

app/views/dashboard/index.blade.php

@foreach ($articles as $article)
    <?php
        if( Helpers::isJson($article) )
        {
            $article = json_decode($article);
            // dd($article) // when uncommented it returns a valid PHP object 
        }
    ?>
    <!-- Iterate over the article object and output the data as shown above... -->
@endforeach

如您所见，（暂时）在我的视图foreach($articles as $article) 中，我运行 Helpers::isJson($article) 作为测试并解码对象（如果它是 json）。这使我能够通过 500 Internal Server Error 消息，在文章 div 中填充初始加载的结果，并且在 ajax POST 请求被触发后，我得到了 200 OK 的服务器响应，根据检查 -> 网络。但是，在它更新 div 之后，它并没有显示任何文章。

转转，转转……我想我该休息一下了，我一直在抱怨。 ;)

非常欢迎和赞赏任何想法、建议和/或想法。

Answer 1

首先，你应该知道，当你从控制器/路由返回一个集合时，响应会自动变成json响应，所以你不需要使用json_decode()，它不会工作，相反，你可以尝试这样的事情（从你的 ajax 控制器）：

$articles = Articles::orderBy('published_at', 'desc')->paginate(20);
return View::make('defaultAjax')->with('articles', $articles);

由于使用从服务器端接收的json 数据在客户端构建HTML 对您来说很困难，因此您可以使用生成的视图从服务器返回HTML 而不是json，所以您可以在 success 处理程序中尝试这样的操作：

success:function(articles) {
    $(".articles").html(articles);
}

现在为ajax 响应创建一个视图，而无需像这样扩展模板：

//defaultAjax.blade.php used in the controller for ajax response

<ul>
    @foreach ($articles as $article)
        <li>
            <img src="{{ $article->user_image }}" alt="{{ $article->article_title }}" />
            <a href="{{ $article->article_link }}">{{ $article->article_title }}</a>
            <div class="details">
                <span class="author">{{ $article->author_name }}</span>
                <span class="created">{{ Helpers::time_ago($article->published_at) }}</span>
                <span class="symbol"><a href ="{{ $article->symbol_link }}">{{ $article->symbol_title }}</a></span>
            </div>
        </li>
    @endforeach
</ul>
{{ $articles->links() }}

注意，没有@extendds() 或@section()，只是普通的局部视图，因此它将在没有模板的情况下呈现，您可以在.articles div 中插入ul。就是这样。

Answer 2

$("#articles").html(articles); ->> $(".articles").html(articles);