jquery ajax 加载结果列表，即使没有任何查询

Posted 2023-02-24

【中文标题】jquery ajax 加载结果列表，即使没有任何查询

【英文标题】：jquery ajax loads list of results even there's nothing to query

【发布时间】：2013-09-15 05:20:14

【问题描述】：

所以我正在学习 jquery 和 ajax 的教程，直到现在我有一个用于搜索和返回搜索结果的搜索表单。它工作正常。但是当我从表单中删除单词或退格单词时，它会加载列表中的所有状态。我该怎么做才能仅在有单词时返回，如果表单中没有单词则不返回任何内容。

status.html的sn-p：

% block add_account %
<input type="text" id="search" name="search" />

<ul id="search-results">

</ul>

% endblock %

ajax.js：

$(function() 

    $('#search').keyup(function() 

        $.ajax(
            type: "POST",
            url: "/status/search_status/",
            data: 
                'search_text' : $('#search').val(),
                'csrfmiddlewaretoken' : $("input[name=csrfmiddlewaretoken]").val()
            ,
            success: searchSuccess,
            dataType: 'html'
        );
    );
);

function searchSuccess(data, textStatus, jqXHR)

    $('#search-results').html(data)

ajax.html:

% if statuss.count > 0 %

% for status in statuss %
    <li><a href="/status/get/status.id/">status.status</a></li>
% endfor %

% else %

<p>None to show</p>

% endif %

views.py

def search_status(request):
    if request.method == "POST":
        search_text = request.POST['search_text']
    else:
        search_text=''

    statuss = Status.objects.filter(status__icontains = search_text)

    return render(request, 'ajax_search.html', 'statuss':statuss)

【参考方案1】：

$('#search').keyup(function () 
    if (!$.trim(this.value).length) return; //<< returns from here if nothing to search
    $.ajax(
        type: "POST",
        url: "/status/search_status/",
        data: 
            'search_text': $('#search').val(),
                'csrfmiddlewaretoken': $("input[name=csrfmiddlewaretoken]").val()
        ,
        success: searchSuccess,
        dataType: 'html'
    );
);

顺便说一句，如果用户输入太快，您应该限制您的 keyup 请求以避免多次调用：

(function () 
    var throttleTimer;
    $('#search').keyup(function () 
        clearTimeout(throttleTimer);
        throttleTimer = setTimeout(function () 
            if (!$.trim(this.value).length) return;
            $.ajax(
                type: "POST",
                url: "/status/search_status/",
                data: 
                    'search_text': $('#search').val(),
                        'csrfmiddlewaretoken': $("input[name=csrfmiddlewaretoken]").val()
                ,
                success: searchSuccess,
                dataType: 'html'
            );
        , 100);
    );
());

【讨论】：

@Robin 返回什么？你的意思是？如果有东西要搜索，应该发送请求

很抱歉，您提供的第一个脚本没有返回任何内容，我没有任何意义。但第二个有效。但是，当我在表单中退格时，它仍然显示列表中的最后一个查询......我做错了什么？

@Robin 而不是 keyup，尝试使用 keypress。对于第一个脚本，必须工作，所以你在某处做错了什么。始终检查您的控制台是否存在拼写错误

keypress 什么都不返回。我刚刚复制并粘贴了你给我的脚本。

会不会是jquery版本的原因？