Laravel AJAX 搜索和显示帖子

Question

我想用 Laravel 创建一个 AJAX 搜索。我被困在显示控制器返回的结果（帖子）的部分。到目前为止，我有这个：

搜索表单（home.blade.php）

//The search form
{{ Form::open(array('id' => 'search', 'url' => ' ')) }}
    {{ Form::text('query', Input::old('query'), array('placeholder' => 'Search for posts..')) }}
    {{ Form::hidden('sort_col', Input::old('sort_col')) }}
    {{ Form::hidden('sort_dir', Input::old('sort_dir')) }}
    {{ Form::button('<i class="fa fa-search"></i>', array('type' => 'submit', 'name' => 'submit', 'title' => 'Zoeken')) }}
{{ Form::close() }}

显示帖子 (home.blade.php)

<!-- Posts !-->
<div id="posts">
@if (!$posts->count())
    <div class="content">No posts found!</div>
@else
    @foreach ($posts as $post)
        <div class="list-item clearfix">
            <div class="content">
                <img src="{{ URL::to($post->thumbnail) }}" alt="" />
                <h1>{{{ $post->title }}}</h1>
                <div class="tags">
                @foreach ($post->tags as $tag)
                    <abbr title="{{{ $tag->description }}}">{{{ $tag->title }}}</abbr>
                @endforeach
                </div>
            </div>
            <div class="score">
                {{ $post->rating }}
            </div>
        </div>
    @endforeach
@endif
</div>
<!-- /Posts !-->

HomeController.php

public function postSearch()
{
    if (!Request::ajax()) {
        return null;
    }

    $input = array(
        'query'    => Input::get('query'),
        'sort_col' => Input::get('sort_col'),
        'sort_dir' => Input::get('sort_dir'),
    );

    $posts = new Post;
    $posts = $posts->select(...)->where(...)->orderBy(...); //Search query here

    Input::flash();

    return $posts;
}

在提交搜索时调用postSearch() 方法。

jQuery (home.blade.php)

$('#search').submit(function(e) {
    e.preventDefault();

    var form = $(this);

    $.post(form.attr('action'), form.serialize(), function(data) {
        $('#posts').html(data);
        console.log(data);
    });
});

一切正常，正在返回数据。当我将数据记录到控制台时，它看起来像这样：

红框中的对象是帖子。如何在#posts div 中显示这些帖子？我一直在苦苦挣扎，但我就是想不通。

Answer 1

您必须遍历帖子数组并创建必要的 jquery 元素。
这应该给你的想法：

for(var i=0; i<data.length; i++){
    var post = data[i];
    var listItem = $('<div></div>').addClass('list-item clearfix');
    var content = $('<div></div>').addClass('content');
    var img = $('<img/>').attr('src', post.thumbnail);
    var h1 = $('<h1></h1>').text(post.title);
    // etc

    content.append(img).append(h1);
    listItem.append(content);
    $('#posts').append(listItem);
}

更新

对于您的图片网址，您可以在控制器中执行以下操作：

public function postSearch()
{
    // ... code omitted

    foreach($posts as $post){
        $post->thumbnail = URL::to($post->thumbnail);
    }

    return $posts;
}

这会将 thumbnail 属性替换为生成的完整 url，您可以在客户端上使用它。