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);
    });
});

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

returned data in the console

红色框内的对象是帖子。如何在#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。

Laravel AJAX搜索和显示帖子

1 个答案: