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，这样就可以进行另一次搜索。

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

1 个答案: