php - 通过 AJAX 在 Laravel 中更新刀片

问题描述

我的 Laravel 应用程序中有一个刀片，如下所示：

在右侧，有一组使用 foreach 循环生成的事件。

<!-- Events block -->
<div class="col-md-8">

    <div class="event-list-container">


        @foreach($events as $event)

        <!-- Event box -->
        <div class="event-box">

            <div class="row">

                <!-- Date -->
                <div class="col-sm-2 col-md-1">

                    <div class="date">
                        <p class="day">{{ $event->startDate->format('d') }}</p>
                        <p class="month">{{ $event->startDate->format('F') }}</p>
                    </div>

                </div>

                <!-- Picture -->
                <div class="col-sm-4 col-md-3">

                    <div class="event-image">
                        <a href="{{action('EventController@show',[$event->id, str_slug($event->title)])}}">
                            <img class="img-responsive" alt="{{ $event->title }}" src="{{ $event->image }}">
                        </a>
                    </div>

                </div>

                <!-- Details -->
                <div class="col-sm-6 col-md-8">

                    <div class="event-details">

                        <h2 class="title">
                            <a href="{{action('EventController@show',[$event->id, str_slug($event->title)])}}">{{ $event->title }}</a>
                        </h2>
                        <p class="when">
                            <span class="inline-title">When:</span> {{ $event->startDate->format('d M Y') }} | {{$event->startTime}}-{{$event->finishTime}}</p>
                        <p class="where">
                            <span class="inline-title">Where:</span>{{ $event->location }}</p>

                    </div>

                </div>

            </div>

        </div>
        <!-- End -->


        @endforeach

        <div class="event-list-footer">
            <div class="row">
                <div class="col-xs-12">

                    {{ $events->links() }}

                </div>
            </div>

        </div>

    </div>

</div>

来自$events一个EventController@index看起来像这样的方法：

/**
 * Display a listing of the resource.
 *
 * @return \Illuminate\Http\Response
 */
public function index()
{
    //List all events in ascending order
    $events = Event::orderBy('startDate', 'asc')->paginate(6);

    return view('pages.events.index', compact('events'));
}

很简单的东西。

显示优化视图的框使用 Laravel Scout 搜索事件表，如果找到一个事件，则返回一个事件。

我一直在四处寻找，因为我想要的是，如果找到任何东西，右侧的列表会刷新并显示找到的内容。

在我的SearchController我有这个：

/**
 * Search for a specific event given text entered usingh scout
 */
public function eventSearch(Request $request)
{
    // The search string entered
    $search = $request->get('q');

    $events = Event::search($search)->get();

    return $events;
}

如您所见，如果找到任何事件，它会返回一个事件集合。

现在在我的 AJAX 请求中，我现在有一个简单的尝试。

$('#eventSearch').on('submit', function (e) {
    e.preventDefault();

    var search = $(this).find('input[name=q]').val();

    $.ajax({
        url: "/search/event",
        method: 'GET',
        data: {
            q: search
        },

        error: function (xhr, status, error) {
            var err = JSON.parse(xhr.responseText);
            alert(error);
        },
        success: function (data) {
            alert('We found'.data);
        }
    });
});

展望未来，我是否必须将右侧的列表转换为部分列表，就像找到任何东西一样，我基本上想重建整个部分。

->render()使用 Laravel 的方法将列表重新渲染为部分列表会更好吗？

标签： phpjqueryajaxlaravel

是的，您可以将列表重新呈现为部分视图，并让控制器操作eventSearch返回呈现的 html。

我会给局部视图中的根元素一个唯一的 id，例如id="event-list"，这使得定位变得容易。

在成功回调中，您可以轻松替换部分：

success: function (data) {
        $('#event-list').replaceWith(data);
    }

您的控制器操作如下所示：

/**
 * Search for a specific event given text entered usingh scout
 */
public function eventSearch(Request $request)
{
    // The search string entered
    $search = $request->get('q');

    $events = Event::search($search)->get();

    return view('pages.events.partials.eventlist', compact('events'));
}

php - 通过 AJAX 在 Laravel 中更新刀片

问题描述

解决方案

推荐阅读