使用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/');
        }
    },
    ...

显然，您必须更改许多细节（名称，URL等）才能与您的应用程序匹配，但是，此方法将允许您在不重新加载整个页面的情况下重新加载页面上的内容。

Answer 2

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

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