控制器返回纯 json 数据而不是停留在页面上答案

【问题标题】：Controller returns plain json data instead of staying on page控制器返回纯 json 数据而不是停留在页面上
【发布时间】：2014-10-11 18:44:37
【问题描述】：

我正在尝试向我们发送 ajax 请求以返回搜索结果。当我提交搜索时，它会在纯黑白页面上返回我的 json 数据。如何让它留在页面上并执行我的 javascript 的其余部分？我认为问题要么是 event.preventDefault 工作不正常，要么是控制器中的 return 语句阻止了进一步发生。

这是我的代码 sn-ps：

HTML

<div id="contactform">
    <p>Search for a Contact</p>
    {{ Form::open(array('route' => 'contacts.results', 'method' => 'post', 'id' => 'contactsearchform')) }}
        {{ Form::text('contactsearch', null, array('id' => 'contactsearch', 'placeholder' => 'Name')) }}
        <button type="submit">Search</button>
    {{ Form::close() }}
</div>

<div id="search_results">
    Search Results
    <table cellpadding="0" cellspacing="0" border="0">
        <thead>
            <tr>
                <td class="name first">Name</td>
                <td class="phone">Phone</td>
                <td class="email">Email</td>
                <td class="lot">Lot</td>
                <td class="edit last"></td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="name first"><a href="#" class="contact"></a></td>
                <td class="phone"></td>
                <td class="email"></td>
                <td class="edit last"></td>
            </tr>
        </tbody>
    </table>
</div>

Javascript

$('contactsearchform').submit(function(event) {
    event.preventDefault();
    var dataString = $(this).serialize();
    console.log('Submitted Data:\n' + dataString);
    $.ajax({
        type: "POST",
        url: "/contacts.results",
        data: dataString,
        error: function(){
            console.log("Something is wrong. Please inform Admin");
        },
        success: function(resultData){
            console.log('Result Data:\n' + resultData);
            resultDataP = $.parseJSON(resultData);
            console.log('Parsed Data:\n' + resultDataP);
            if(resultDataP.table){
                $('#search_results').html(resultDataP.table);
                $('#search_results').fadeIn();
                $('#contactsearchform input').blur();
            }else{
                console.log("Something didn't work.");
            }
        }
    });
    return false;
});

控制器

public function showSearch()
{
    return View::make('portal.search');
}

public function doSearch()
{
    // Search for contacts here
    $search = Input::get('contactsearch');

    $contacts = DB::table('contacts')->where('last_name', 'LIKE', "$search")->get();

    if (count($contacts) != 0) {
        $response = [
            'status' => 'success',
            'msg' => 'Contacts matched your search.',
            'results' => $contacts
        ];
    }
    else {
        $response = [
            'status' => 'error',
            'msg' => 'No contacts matched your search.'
        ];
    }

    return Response::json($response);
}

还有我的路线

// Search for contacts
Route::get( '/portal/contacts', array(
    'as' => 'contacts.search',
    'uses' => 'PortalController@showSearch'
) );

Route::post( '/portal/contacts', array(
    'as' => 'contacts.results',
    'uses' => 'PortalController@doSearch'
) );

【问题讨论】：

选择器缺少# operator to search by id -- $('#contactsearchform').submit(...)。没有它，它将被视为搜索 <contactsearchform> 的 element selector。
啊，我讨厌那些简单的东西你一眼就看过去了！这就是我公司需要其他开发人员的原因之一。

标签： javascript jquery ajax json laravel

【解决方案1】：

你应该改变你的 javascript 的东西，像下面这样使用它

    /** consider the hash before the id of form you haven't added one so its not considering the form
also you need to change the url of you $.ajax call put url:'/portal/contacts' because jquery don't understand name of laravel route
**/
$('#contactsearchform').submit(function(e){
   ........
});

【讨论】：