Question

我是ajax的新手。以下是我的用例：我正在开发一个侧面项目，将展示新闻和各种不同的运动。为了执行相同的操作，我使用来自不同来源的RSS源。我可以使用'feedparser'插件在django视图中获取和解析rss提要，并将相同的上下文传递给相应的模板。以下是我的视图功能和模板（用于板球）。

def cricket(request):
    feeds_cric = feedparser.parse('http://www.espncricinfo.com/rss/content/story/feeds/0.xml') #espncricinfo feed.
    feeds_cric_scores = feedparser.parse('http://static.cricinfo.com/rss/livescores.xml') #espncricinfo feed.
    context = {'feeds_cric': feeds_cric,'feeds_cric_scores' : feeds_cric_scores}
    return render(request,'scorecenter/cricket.html', context)

以下是相应的模板。

{% extends "scorecenter/index.html" %}
{% block content %}
    <ul>
        {% for entry in feeds_cric.entries %}
        <li><a href="{{ entry.link }}">{{ entry.title }}</a></li>
        <p>{{ entry.description }}</p>
        {% endfor %}
    </ul>

{% endblock content %}

{% block score %}
    <ul>
        {% for entry in feeds_cric_scores.entries %}
        <li><a href="{{ entry.link }}">{{ entry.title }}</a></li>
        <!-- <p>{{ entry.description }}</p> -->
        {% endfor %}
    </ul>
{% endblock score %}

以下是index.html文件。

现在，我想使用AJAX重新加载我页面的某些块，而不是重新加载和重定向整个页面。我写了一个脚本来检查

<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Allscores</a>
            </div>
            <div>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#" onclick="urlChecker('cricket')">Cricket</a></li>
                    <li><a href="#" onclick="urlChecker('football')">Football</a></li>
                    <li><a href="#" onclick="urlChecker('basketball')">Basketball</a></li>
                    <li><a href="#" onclick="urlChecker('tennis')">Tennis</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="navbar navbar-default" id="empty_nav"></div>

    <div class="testingData">This should be updated</div>

    <div class="row">
        <div class="col-sm-8" id="news">

            <h3>Latest News</h3>
            {% block content %}
            {% endblock content %}

        </div>
        <div class="col-sm-4" id="scores">

            <h3>Latest scores</h3>
            {% block score %}
            {% endblock score %}

        </div>
    </div>

    <div id="footer">
        Copyright © acllscores.com
    </div>
</body>

在我的urlChecker（）脚本中，我检查单击了哪个锚标记并分配了相应的URL。以下是剧本：

function urlChecker (route) {
    switch(route) {
        case 'cricket':
            $.post( "/scorecenter/cricket/", function( data ) {
                $( ".result" ).html( data );
            });
            break;
        case 'football':
            $.post( "/scorecenter/football/", function( data ) {
                $( ".testingData" ).html( data );
            });
            break;
        case 'tennis':
            $.post( "/scorecenter/tennis/", function( data ) {
                $( ".testingData" ).html( data );
            });
            break;
        case 'basketball':
            $.post( "/scorecenter/basketball/", function( data ) {
                $( ".testingData" ).html( data );
            });
            break;

    }
}

更新：添加网址文件：

urlpatterns = patterns('',
    url(r'^$', views.index,name='index'),
    url(r'^test/$', views.test,name='test'),

    url(r'^cricket/$', views.cricket,name='cricket'),
    url(r'^basketball/$', views.basketball,name='basketball'),
    url(r'^football/$', views.football,name='football'),
    url(r'^tennis/$', views.tennis,name='tennis'),

)

我不知道如何使用ajax将Feed数据发布到我的模板。请帮忙

Answer 1

从Ajax的角度来看

根据您在问题中所写的内容，发送GET请求而非POST请求更为合适。您不是要向这些端点发送任何需要存储的信息，而只是希望从中检索更新。这不会改变您的大部分代码，您可以使用☞ $.get()代替$.post()进行更改。

从Django的角度来看

发送GET请求也更容易，因为您不需要考虑☞ Django's CSRF protection。发布其他ajax请求（例如POST，DELETE等）也不是那么难，但它需要额外的步骤，包括在每次请求时发送CSRF令牌（详细记录在链接的文档）。

从Ajax请求中呈现结果

目前，用于呈现Ajax结果的模板可能存在概念性问题，例如： scorecenter/cricket.html。在最顶层，您从index.html延伸，这意味着每个请求不仅会返回您要插入的html块，还会返回index.html的任何内容。

此外，由于您将通过Javascript将结果插入到已加载的网站中，因此您不需要定义模板块。让这些模板仅使用$('.testingData').html(data)准确呈现要插入DOM的html。

调试Ajax请求的问题

在开发您的网站时，在浏览器中打开开发人员工具并在那里激活控制台（Firefox和Chrome都可以）。每当Ajax请求失败时，它都会在那里显示错误，然后您可以反省。

常见错误为404（如果找不到端点），400或403如果请求未获得授权，或500如果服务器处理您的请求时出错。 ☞ More complete list of status codes

欢迎使用更多详细信息更新您的问题。由于这是一个非常广泛的主题，因此可能会被社区关闭。在这种情况下，您可以随时搜索更具体的问题，或者如果您没有找到答案，请将它们放在一个新问题中。

使用AJAX将RSS源传递到django视图

1 个答案: