Question

我尝试使用ajax在Laravel 4中构建搜索实用程序，用户可以在其中搜索订单和估算等各种内容，并将结果加载为指向这些订单，估算等的链接＆＃34; search_results＆＃34;希望页面上的div。

现在我已经让ajax正确进入数据库并返回相关信息，而不是将其显示在＆＃34; search_results＆＃34; div＆＃34; home＆＃34;路线I被重定向到＆＃34;搜索＆＃34;显示信息的路线，其中显示了这些订单的所有内容。

如果有人可以指出为什么我被重定向到另一个页面而不是在主页上的正确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'
    ));

Answer 1

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

要在您的情况下执行AJAX请求，您需要回显搜索结果而不是返回它们。并且在功能中根本没有返回声明。无论您打印出什么内容，都会以字符串的形式返回给您的AJAX请求。您可能希望对搜索结果进行json_encode，以便您可以更轻松地在前端解析它们，这样您就可以按照自己喜欢的方式显示结果。

编辑：你被发送到另一个页面的原因仍然是因为你在javascript中触发了表单提交。实际上你想要阻止它并仅使用AJAX请求来处理它。该表单提交正在触发正常的浏览器处理的HTTP请求，该请求正在重新加载页面。

Answer 2

首先是测试你的/搜索页面的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');
        }
    });

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

2 个答案:

调试