從管理頁面添加新用戶時，如何顯示使用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>

我的views.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並獲取用戶的數據。