如何在从管理页面添加新用户时显示使用 AJAX Django 更新的用户列表

Question

我正在尝试显示使用 AJAX 更新的用户列表，同时使用管理页面添加新用户。

Django 1.9，Python 3.5，我正在使用 Windows 机器

我的 index.html

<table class="table">
        <thead>
          <tr>
            <th>Firstname</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
            {% for User in users %}
                <tr> 
                    <td>{{ User.username }}</td>
                    <td>{{ User.email }}</td>
                </tr>
            {% endfor %}
        </tbody>
      </table>

我的意见.py

def index(request):
context = RequestContext(request)
users=User.objects.all()
return render_to_response('index.html',{'users':users},context)

如何实现 AJAX ？请帮助我如何在 Django 中使用 ajax 并完成这个简单的任务。

Answer 1

欢迎来到stackoverflow！ 如果你只是想使用 Django 调用 Ajax，那么你应该试试这个：

views.py

def index(request):
    return render(request, 'index.html', locals())


def ajax_view(request):
    result = dict()
    data_list = []
    result['status'] = "success"
    for u in User.objects.all():
        list_of_user = {'email': u.email, 'first_name': u.first_name}
        data_list.append(list_of_user)
    result['data'] = data_list

    return HttpResponse(json.dumps(result), content_type='application/x-json')

index.html

<script src="/path/to/js/my_ajax.js"></script>
<table class="myTable">
        <thead>        
        </thead>
        <tbody>

        </tbody>
</table>

my_ajax.js

$( document ).ready(function() {
    $.ajax({
        type: 'GET',
        url: '/ajax/',
        success: function (result) {

            if (result.status == "success") {
                if (result['data']) {
                    jQuery.each(result['data'], function (i, val) {

                        $('.myTable').append(
                            '<tr><td id="first_name">'+val['first_name']+'</td>' +
                            '<td id="email">'+val['email']+'</td></tr>');

                    });
                }
            }
        }
    })

});

urls.py

url(r'^ajax/$', ajax_view, name='temp'), # Function calls ajax
url(r'^index/$', index, name='index'),  # main function redirect to index.html

这将调用您的 ajax 并获取用户的数据。