javascript - Ajax返回信息但重定向到不同的页面

Question

我正在尝试使用 ajax 在 Laravel 4 中构建一个搜索实用程序，用户可以在其中搜索各种内容，例如订单和估计，并将结果作为指向这些订单、估计等的链接加载到“希望页面上的 search_results"div。

现在我已经让ajax正确进入数据库并返回相关信息，但不是将其显示在“home”路线上的“search_results”div中，而是重定向到“search”路线，其中该信息显示在显示这些订单的所有内容的地方。

如果有人能指出为什么我被重定向到不同的页面，而不是将信息加载到主页上正确的 div 中，或者如何控制 ajax 返回的内容，我将非常感激!谢谢!

这是我的观点:

<div class="large-6 columns">
{{Form::open( array('route' => 'search', 'method' => 'post', 'id' => 'search_form'))}}      

        {{ Form::select('search_table',
                array(
                    'select'        => 'Search...',
                    'commissions'   => 'Search commissions',
                    'estimates'     => 'Search estimates',
                    'orders'        => 'Search orders',
                    'warranties'    => 'Search warranties',
        ), null, array('id' => 'search_table')) }}

        <div class="search_box" id="search_column_div">
            <select id='search_column' name='search_column'>
                         <option value='created_at'>by date created</option>
                    </select>
        </div>

        <div id="search_input_div">
            <input id='search_input' name='search_input' class='search_input' placeholder='Enter Order Name'/>
        </div>

{{ Form::submit('Search', array('id' => 'search_button','class' => 'button expand radius search_button no_display'))}}


{{ Form::close() }}

   <div id="search_results">
   </div>

</div>

JS:

/*AJAX Search*/


$(document).load(function(){
 $.ajax({
        url: '/search',
        type: 'get',
        cache: false,
        data: $('#search_form').serialize(),
        success: function(data){
            console.log(data);
            $('#search_results').html(data);
        },
        error: function(xhr, textStatus, thrownError){
            console.log(xhr);
            console.log(textStatus);
            console.log(thrownError);
            alert('Somethin went wrong');
        }
    });
});

Controller :

public function searchPost(){
    $search_table   = Input::get('search_table');
    $search_column  = Input::get('search_column');
    $search_input   = Input::get('search_input');

    $search = DB::table($search_table)->where($search_column, 'LIKE', "%{$search_input}%")->get();
    echo json_encode($search);
    exit;
}

路线:

/*Search Page for Ajax*/
    Route::post('/search', array(
        'as'    => 'search',
        'uses'  => 'HomeController@searchPost'
    ));

Answer 1

问题是 Controller 中的返回。当 Laravel 中的路由或 Controller 返回任何内容时，它会被发送回浏览器。通常它以页面重定向或 url 的形式发送。在这种情况下，您将向其发送浏览器正在解析和显示的数据。

要在您的情况下执行 AJAX 请求，您需要回显搜索结果而不是返回它们。并且函数中根本没有 return 语句。无论您打印出什么内容，都将以字符串的形式返回到您的 AJAX 请求。您很可能希望对搜索结果进行 json_encode，以便您可以在前端更轻松地解析它们，从而允许您以任何您喜欢的方式显示结果。

编辑:您被发送到另一个页面的原因仍然是因为您在 JavaScript 中触发表单提交。您实际上希望防止这种情况发生并仅通过 AJAX 请求来处理它。该表单提交会触发正常的浏览器处理的 HTTP 请求，该请求正在重新加载页面。