关于jquery：Laravel AJAX搜索和显示帖子


Laravel AJAX search and display posts

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

搜索表单(home.blade.php)

1
2
3
4
5
6
7
//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">', array('type' => 'submit', 'name' => 'submit', 'title' => 'Zoeken')) }}
{{ Form::close() }}

显示帖子(home.blade.php)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- Posts !-->

@if (!$posts->count())
    No posts found!
@else
    @foreach ($posts as $post)
       
           
                <img src="{{ URL::to($post->thumbnail) }}" alt="" />
                {{{ $post->title }}}
               
                @foreach ($post->tags as $tag)
                    description }}}">{{{ $tag->title }}}</abbr>
                @endforeach
               
           
           
                {{ $post->rating }}
           
       
    @endforeach
@endif

<!-- /Posts !-->

HomeController.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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)

1
2
3
4
5
6
7
8
9
10
$('#search').submit(function(e) {
    e.preventDefault();

    var form = $(this);

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

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

returned

红色框中的对象是帖子。如何在#posts div中显示这些帖子？我已经苦苦挣扎了一段时间，但我只是想不通。

相关讨论

您将不得不遍历帖子数组并创建必要的jquery元素。
这应该给你一个主意：

1
2
3
4
5
6
7
8
9
10
11
12
for(var i=0; i<data.length; i++){
    var post = data[i];
    var listItem = $('').addClass('list-item clearfix');
    var content = $('').addClass('content');
    var img = $('<img/>').attr('src', post.thumbnail);
    var h1 = $('').text(post.title);
    // etc

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

更新

对于图像URL，我在控制器中执行以下操作：

1
2
3
4
5
6
7
8
9
10
public function postSearch()
{
    // ... code omitted

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

    return $posts;
}

这将缩略图属性替换为可在客户端上使用的生成的完整URL。

相关讨论