Question

我正在调用一个keyup函数来从服务器获取一个json数组来自动完成我的searchinput。当我第一次这样做时，这很好用。但是，当我使用自动完成时，使用新数据加载相同的视图并尝试再次执行相同的过程，我收到错误。我已经尝试使用$（document）.ajaxSuccess（function（）{}）修复它;除了我的.ready函数，但这不起作用。有人向我指出，我不能在另一个事件处理程序中使用事件处理程序，但正如我所说，它第一次正常工作。我读了一下这个错误，发现它意味着我要解析json两次。但是，如果这是真的，那么它第一次就行不通了吗？希望有人可以提供帮助。

jquery：

/**
 * for searching the uni
 */
$("#keyworduni").keyup(function(){
    var keyword = $("#keyworduni").val();
    $.get( "searchuni", { search: keyword })
        .done(function( data ) {

            $('#resultsuni').show();

            $('#resultsuni').html('');

            var results = jQuery.parseJSON(data);

            $(results).each(function(key, value) {
                $('#resultsuni').append('<div class="itemuni">' + value + '</div>');
            });
            console.log(data);

            $('.itemuni').click(function() {
                var text = $(this).html();
                $('#keyworduni').val(text);
            });

            if($('#keyworduni').val() == ''){
                $('#resultsuni').hide();
            }

        });
});

调用此路线：

Route::get('/searchuni', [
'uses' => 'UniController@searchUni',
'as' => 'user.searchuni'

]）;

在我的UniController中

：

/**
 * get the data from db from keyword for uni
 */
public function searchUni(Request $request){

    if($request->ajax()) {

        $keyword = $request->search;

        //query user model
        $unis = DB::table('unis')->where([
            ['name', 'LIKE', '%' .$keyword. '%'],
        ])->limit(3)->get();

        $json = array();

        foreach ($unis as $uni) {
            array_push($json, $uni->name);
        }

        return json_encode($json);

    }

}

错误：

Uncaught SyntaxError: Unexpected token o in JSON at position 1
at JSON.parse (<anonymous>)
at Function.n.parseJSON (jquery-1.12.4.min.js:4)
at Object.<anonymous> (feed.js:177)
at i (jquery-1.12.4.min.js:2)
at Object.fireWith [as resolveWith] (jquery-1.12.4.min.js:2)
at y (jquery-1.12.4.min.js:4)
at XMLHttpRequest.c (jquery-1.12.4.min.js:4)

json样本：

["TU - Berlin"]

编辑：

我发现它不是第二次使用该函数，而是它必须与我用新数据“重新加载”视图然后再次尝试使用该函数的方式有关。这就是HTML的样子以及我调用路径再次获取视图的方式，以及我如何获取新数据的逻辑。

HTML：

<form action="{{ route('shop.changeto', ['kind' => 'uni']) }}" method="get">
                            <li class="dick" style="margin-bottom: 20px;"><input type="text" class="search" id="keyworduni" name="searchuni" value="" placeholder="Search" autocomplete="off">
                                <input type="submit" value="Search" id="Batton1"></li>
                            <li class="dick">
                                <div id="resultsuni">
                                    <div class="itemuni">abc</div>
                                    <div class="itemuni">def</div>
                                    <div class="itemuni">hij</div>
                                </div>
                            </li>
                            {{ csrf_field() }}
                        </form>

被叫路线：

Route::get('/changeto/{kind}', [
'uses' => 'ProductController@changeTo',
'as' => 'shop.changeto'

]）;

被叫函数：

public function changeTo(Request $request, $kind){

    if($kind == 'uni'){
        $route = "shop.feeduni";
        $argument = "'". "uni" . "'";
        $argumentequals = $request->input('searchuni');
    } else if($kind == 'school'){
        $route = "shop.feedschool";
        $argument = "'". "school" . "'";
        $argumentequals = $request->input('searchschool');
    }

    return redirect()->route($route, [$argument => $argumentequals]);

}

下一条路线（当我搜索大学时）：

Route::get('/feeduni/{uni}', [
'uses' => 'ProductController@getFeedUni',
'as' => 'shop.feeduni'

]）;

和被调用函数：

public function getFeedUni(Request $request, $uni){

    if($uni == ' '){
        $uni = $request->input('searchuni');
    }

    $posts = DB::table('products')->where([
        ['sold', '=', 'n'],
        ['uni', '=', $uni],
    ])->latest()->paginate(2);

    //returns the index page from shop folder and attach Product Data
    // the string products can then be used as $products in shop.index -> have all the products

    if($request->ajax()){

        return [
            'posts' => view('shop.feedajax')->with(compact('posts'))->render(), //gibt uns feedajax mit neuen posts
            'next_page' => $posts->nextPageUrl() //setzt den wert für html nextpage element
        ];
    }

    /**
     * now returning the view and the posts
     */
    return view('shop.feed')->with(compact('posts'));
}

现在我和以前一样，我正在尝试再次使用jquery-function并将错误视为结果。
也许有人可以找到我的错误。

Answer 1

问题是因为data已经被反序列化了。尝试再次反序列化对象会导致您看到的错误。只需从代码中删除$.parseJSON()来电即可。另请注意，data将是一个对象，因此您需要使用$.each来迭代它，而不是$().each()。试试这个：

$.get("searchuni", { search: keyword }).done(function(data) {
    $('#resultsuni').html('').show();

    $.each(data, function(key, value) {
        $('#resultsuni').append('<div class="itemuni">' + value + '</div>');
    });

    // I'd also suggest making this a single delegated event handler
    $('.itemuni').click(function() {
        var text = $(this).html();
        $('#keyworduni').val(text);
    });

    if ($('#keyworduni').val() == ''){
        $('#resultsuni').hide();
    }
});

jquery autocomplete返回json错误

1 个答案: