Question

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

以下是我的代码段：

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

Answer 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){
   ........
});

Controller返回普通的json数据而不是停留在页面上

1 个答案: