Ajax返回信息，但重定向到另一个页面

Ajax returning information but redirecting to a different page

本文关键字：另一个 重定向 返回 信息 Ajax      更新时间：2023-09-26

我试图用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');
        }
    });
});

控制器:

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

问题是控制器中的返回。当从Laravel的路由或控制器返回任何东西时，它会被发送回浏览器。通常以页面重定向或url的形式发送。在本例中，您向它发送浏览器正在解析和显示的数据。

要在您的示例中执行AJAX请求，您需要回显搜索结果而不是返回它们。并且在函数中根本没有return语句。打印出来的内容将以字符串的形式返回给AJAX请求。您很可能想要json_encode搜索结果，以便您可以更容易地在前端解析它们，这将允许您以任何您喜欢的方式显示结果。

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

首先是测试你的/search页面的json输出，你需要修改你的代码:

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

之后，你应该测试你的页面，例如www.webpage.com/main/search您应该会看到一个格式与类似的字符串:

{"player_id":1,"level":1,"quests":{"1":{"percent_completed":100,"quest_title":"the first quest"},"2":{"percent_completed":80,"quest_title":"the second quest"},"3":{"percent_completed":50,"quest_title":"the 3rd quest"}}}

调试

，但由于该函数需要post数据，我们将更改代码为(暂时):

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();
    $sample_array = array("id"=>1,"name"=>"sample");
    echo json_encode($sample_array);
    exit;
}

加载时运行ajax:

    $.ajax({
        url: '/search',
        type: 'post',
        cache: false,
        data: $('#search_form').serialize(),
        success: function(data){
            console.log(data);
            $('#search_results').html(data);
        },
        error: function(xhr, textStatus, thrownError){
            alert('Somethin went wrong');
        }
    });
相关文章：