jquery id 匹配但根本不起作用

Question

我有 python/django 应用程序，需要搜索引擎，而对于搜索引擎，我正在使用 jquery 的强大功能。我对 Jquery（实际上是整个 Javascript）仍然很陌生，但我认为这似乎是正确的，我不确定为什么这不起作用。

所以我有这个代码：

 <li class="nav-header">search for community</li>
      {% csrf_token %}
      <input type="text" id="search" name="search" />

      <ul id="search-results">

      </ul> 

我有输入 id 搜索。和另一个 id 搜索结果。 然后我有这个 javascript 文件。

$(function(){

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

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

    });

});();

function searchSuccess(data, textStatus, jqXHR)
{
    $('#search-results').html(data);
}

我在这里匹配 id 搜索。使用 keyup 功能。是因为功能错误吗？这不太可能，因为整个事情都很好。总的来说，我的意思是搜索功能在这里http://127.0.0.1:8000/search/ 有search.html

{% extends 'base.html' %}

{% block content %}
    <h2>Search</h2>

    <form method="get" action=".">
        <table>
            {{ form.as_table }}
            <tr>
                <td>&nbsp;</td>
                <td>
                    <input type="submit" value="Search">
                </td>
            </tr>
        </table>

        {% if query %}
            <h3>Results</h3>

            {% for result in page.object_list %}
                <p>
                    <a href="{{ result.object.get_absolute_url }}">{{ result.object.name }}</a>
                </p>
            {% empty %}
                <p>No results found.</p>
            {% endfor %}

            {% if page.has_previous or page.has_next %}
                <div>
                    {% if page.has_previous %}<a href="?q={{ query }}&amp;page={{ page.previous_page_number }}">{% endif %}&laquo; Previous{% if page.has_previous %}</a>{% endif %}
                    |
                    {% if page.has_next %}<a href="?q={{ query }}&amp;page={{ page.next_page_number }}">{% endif %}Next &raquo;{% if page.has_next %}</a>{% endif %}
                </div>
            {% endif %}
        {% else %}
            {# Show some example queries to run, maybe query syntax, something else? #}
        {% endif %}
    </form>

{%endblock%}

我正在尝试使用 search.html 中的功能在 index.html 的搜索栏中和 Jquery keyup 功能中工作。 你能告诉我为什么我不能使用匹配 id 的 jquery 函数吗？

详细说明：这就是我的代码的工作方式 里面的 urls.py 我有url(r'^search/$',include('haystack.urls')), 和其他干草堆设置。 然后在views.py中

def search_titles(request):
    categories = SearchQuerySet().autocomplete(content_auto=request.POST.get('search_text', ''))            

    return render_to_response('ajax_search.html', {'categories' : categories
        })

对于 ajax_search.html

{% if categories.count > 0 %}

{% for category in categories %}
    <li><a href="/category/{{post.category}}">{{ category.title }}</a></li>
{% endfor %}

{% else %}

<li>None to show!</li>

{% endif %}

我几乎可以肯定，问题出在 ajax 上

Answer 1

如果你只是在练习 AJAX，你的方法是可以的，但是 jQuery 有a neat method 可以做到这一点..

$(function(){
    $('#search').keyup(function() {
            $('#search-results').load("/search/", { 
                'search_text' : $('#search').val(),
                'csrfmiddlewaretoken' : $("input[name=csrfmiddlewaretoken]").val()
            });
    });
});

Answer 2

您是否签入了开发者工具（chrome）？如果你去网络选项卡，然后点击 XHR，你会得到当前页面的所有 ajax 请求。

现在，当您找到您的请求时，单击它并转到“响应”。如果使用 HTTP 代码 20x 或 304，您将得到正确的响应。如果没有，服务器不知道如何处理您的请求（404）或发生服务器错误（500）。

如果您得到了正确的响应，请尝试在该回调中添加一个 console.log。您应该会看到脚本返回的内容。

Ajax 不是罪魁祸首，ajax 只是隐藏客户端 > 服务器通信的方法。要么是客户端脚本处理事情的方式，要么是服务器端脚本处理事情的方式。

Answer 3

我看到这还没有解决。

我通常这样做的方法是在加载 JS 文件之前设置全局站点根目录或通过generating an url for your search url。然后在您的 javascript 文件中，只需使用您之前设置的全局变量。我不知道 django 所以下面的代码可能有错误。

<script type='text/javascript'>var ROOT= {{ build_absolute_uri('/')|escapejs }};</script>
<script src='{% url search_script %}'></script>