当服务器找不到任何错误消息时，如何在 Jquery 中显示自定义错误消息？

Question

我正在尝试传递用户输入表单数据 jquery/ajax 以检查是否有。最后，我可以在使用 json_encode() 方法 PHP 端的同时从服务器获取它们并在 Jquery 中显示结果。

但是，当在 Jquery HTML 客户端中找不到返回的任何内容时，如何在 Jquery 中显示自定义错误消息“找不到搜索...”？我对 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，以便执行另一个搜索。