使用 AJAX 执行 Python Django 脚本

Question

我正在为我的网站使用 Django。目前我正在使用location.reload();，这样当用户填写数据并单击一个按钮时，它会触发location.reload()，而当整个页面重新加载时，它将执行 Django 脚本。但我不想重新加载整个页面来执行脚本，我只想使用 ajax 重新加载特定的<div>。我该怎么做？

{% if userFirstName %}
                <div id="topAdminCont" class="left">
                    <div id="userSection">
                <!--        <img src="{% static "assets/images/admin_icon.png" %}" width="20" alt="Admin" class="left" /> -->
                        <p id="admin" class="right">{{userFirstName}}</p>
                        <div class="clear"></div>
                    </div>
                    <ul id="dropAdmin">
                        <li><a href="#" id="chngPwdBut">Change Password</a></li>
                        <li><a href="/authentication/logout">Logout</a></li>
                    </ul>
                </div>
            {% else %} 

                <div id="popCont" class="left username_view">
                    <p id="signIn"><a href="#">Signin</a></p>
                    <p>/</p>
                    <p id="signUp"><a href="#">Signup</a></p>
                    <div class="clear"></div>
                </div>
            {% endif %}

上述 HTML 的 Jquery AJAX 处理程序：

function authenticateUser(email, password)
            {

            $.ajax({
                url:    '/authentication/login/',
                type:   'POST',
                    cache: 'false',
                    async: 'true',
                data: {

                        signinEmail:email,signinPwd:password, 

                        },
                dataType: "json",   
                    success:function(response){
                                            statusCode = response.statusCode;
                            if (statusCode == 200)
                            {
                                location.reload();


                            }

                        }
                }); 
            }

Answer 1

首先将<div id="topAdminCont" class="left">...</div> 复制到它自己的文件中。比方说，

top_admin.html

{% if userFirstName %}
<div id="topAdminCont" class="left">
    <div id="userSection">
    <!-- <img src="{% static "assets/images/admin_icon.png" %}" width="20" alt="Admin" class="left" /> -->
        <p id="admin" class="right">{{userFirstName}}</p>
        <div class="clear"></div>
    </div>
    <ul id="dropAdmin">
        <li><a href="#" id="chngPwdBut">Change Password</a></li>
        <li><a href="/authentication/logout">Logout</a></li>
    </ul>
</div>
{% else %}
<div id="popCont" class="left username_view">
    <p id="signIn"><a href="#">Signin</a></p>
    <p>/</p>
    <p id="signUp"><a href="#">Signup</a></p>
    <div class="clear"></div>
</div>
{% endif %}

然后在你的当前页面中，

current.html

<div id="ajaxSection">
    {% include 'top_admin.html' %}
</div>

现在为top_admin.html创建一个新的视图和url规则

urls.py

url(r'^top_admin/$', 'top_admin', name='top_admin'),

views.py

def top_admin(request):
    // your stuff here

    return render(request, 'top_admin.html', {
        // call admin object variables here
    })

最后是你的 ajax 请求，

$.ajax({
    ...
    success: function(response) {
        if (response.statusCode == 200) {
            $('#topAdminCont').load('/app_name/top_admin/');
        }
    },
    ...

显然，您必须更改许多细节（名称、网址等）以匹配您的应用程序，但是，此方法将允许您在 页面上重新加载内容，而无需重新加载整个页面。

Answer 2

将 AJAX 调用的成功部分修改为：

success:function(response){ 
    statusCode = response.statusCode;
    if (statusCode == 200)
    {
        $('#ajaxSection').html(response); #assuming that the response is a HTML
    }
}