Как отобразить пользовательское сообщение об ошибке в Jquery, когда сервер не может найти ни одного?

Question

Я пытаюсь передать пользовательские данные формы ввода jquery / ajax, чтобы проверить, есть ли они. Наконец, я могу получить их с сервера, используя json_encode() метод на стороне PHP, и отобразить результат в Jquery.

Но как отобразить пользовательское сообщение об ошибке «Не удается найти поиск ...» в Jquery, когда не удается найти что-либо, возвращаемое на стороне клиента Jquery HTML? Я немного новичок в синтаксисе Jquery.

$.ajax({
            url: path,
            type: "POST",
            data: { search: keyword },
            dataType: "json",
            success: function(data) {
                $('#suggestionResult').fadeIn(500);
                $('#keyword').removeClass('loading');

                firstIndex = 0;
                limit = 25;

                $.each(data.tabResults, function(i, data) {
                    content = "<ul><li class='result'><strong>" + UCFirstChar(data.title) + "</strong></li>";

                if (data.actors.length > limit) {
                    content += "<li class='result'>" + UCFirstChar(data.actors.substring(firstIndex, limit)) + "...</li>";
                }
                content += "</ul>";
                $(content).appendTo('#suggestionResult');
            });

            error:function (xhr, textStatus, thrownError, data) {
                console.log("Can't find search item...");
                console.log(">> Update Error Status: ", xhr.status, " Error Thrown: ", thrownError);
            }); 

         <div class="search">
            <form id="myform" method="post" action="film_controller/test">
                <input type="text" name="keywordsearch" id="keyword">
                <input type="submit" name="search" value="Search">
            </form>
            <div id="suggestionResult"><div id="error_msg">Can't find search...</div></div>
        </div>

Answer 1

Есть много способов сделать это. Простым способом было бы иметь сообщение об ошибке в скрытом div. Когда поиск не возвращает результаты, просто покажите div. Что-то вроде:

<script type="text/javascript">
    $.ajax({
        url: path,
        type: "POST",
        data: { search: keyword },
        dataType: "json",
        success: function(data) {
            $('#error_msg').hide();
            $('#suggestionResult').fadeIn(500);
            $('#keyword').removeClass('loading');

            firstIndex = 0;
            limit = 25;

            $.each(data.tabResults, function(i, data) {
                content = "<ul><li class='result'><strong>" + UCFirstChar(data.title) + "</strong></li>";

            if (data.actors.length > limit) {
                content += "<li class='result'>" + UCFirstChar(data.actors.substring(firstIndex, limit)) + "...</li>";
            }
            content += "</ul>";
            $(content).appendTo('#suggestionResult');
        });

        error:function (xhr, textStatus, thrownError, data) {
            $('#error_msg').fadeIn(300);

            console.log("Can't find search item...");
            console.log(">> Update Error Status: ", xhr.status, " Error Thrown: ", thrownError);
        }); 
</script>

<div class="search">
    <form id="myform" method="post" action="film_controller/test">
        <input type="text" name="keywordsearch" id="keyword">
        <input type="submit" name="search" value="Search">
    </form>
    <div id="error_msg" style="display: none;">Can't find search...</div>
    <div id="suggestionResult"></div>
</div>

Вы можете добавить к нему кнопку «Закрыть», которая снова скрывает div, чтобы можно было выполнить другой поиск.