如何将Ajax与Django应用程序集成？

简单又好看.您无需更改视图.Bjax处理您的所有链接.看看这个: Bjax

用法:

<script src="bjax.min.js" type="text/javascript"></script>
<link href="bjax.min.css" rel="stylesheet" type="text/css" />

最后,将此包含在您的html的HEAD中:

$('a').bjax();

有关更多设置,请在此处结帐演示: Bjax Demo

我写这封信是因为可接受的答案很旧，需要复习。

所以这就是我在2019年将Ajax与Django集成的方式:)让我们举一个实际的例子说明何时需要Ajax：-

可以说我有一个带有注册用户名的模型，并借助于Ajax我想知道给定的用户名是否存在。

的HTML：

<p id="response_msg"></p> 
<form id="username_exists_form" method='GET'>
      Name: <input type="username" name="username" />
      <button type='submit'> Check </button>           
</form>   

阿贾克斯：

$('#username_exists_form').on('submit',function(e){
    e.preventDefault();
    var username = $(this).find('input').val();
    $.get('/exists/',
          {'username': username},   
          function(response){ $('#response_msg').text(response.msg); }
    );
}); 

urls.py：

from django.contrib import admin
from django.urls import path
from . import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('exists/', views.username_exists, name='exists'),
]

views.py：

def username_exists(request):
    data = {'msg':''}   
    if request.method == 'GET':
        username = request.GET.get('username').lower()
        exists = Usernames.objects.filter(name=username).exists()
        if exists:
            data['msg'] = username + ' already exists.'
        else:
            data['msg'] = username + ' does not exists.'
    return JsonResponse(data)

同样，不推荐使用的render_to_response已被render取代，从Django 1.7起，而不是HttpResponse，我们使用JsonResponse进行Ajax响应。因为它带有JSON编码器，所以您不需要在返回响应对象之前对数据进行序列化，但HttpResponse不建议使用。

虽然这并非完全符合SO的精神,但我喜欢这个问题,因为我在开始时遇到了同样的麻烦,所以我会给你一个快速指南.显然你不理解他们背后的原则(不要把它作为一种冒犯,但如果你这样做,你就不会问).

Django是服务器端.这意味着,比如一个客户端转到url,你在视图中有一个函数可以渲染他看到的内容并在html中返回一个响应.让我们把它分解成例子:

views.py

def hello(request):
    return HttpResponse('Hello World!')

def home(request):
    return render_to_response('index.html', {'variable': 'world'})

index.html的:

<h1>Hello {{ variable }}, welcome to my awesome site</h1>

url(r'^hello/', 'myapp.views.hello'),
url(r'^home/', 'myapp.views.home'),

$.ajax({
    url: '127.0.0.1:8000/hello',
    type: 'get', // This is the default though, you don't actually need to always mention it
    success: function(data) {
        alert(data);
    },
    failure: function(data) { 
        alert('Got an error dude');
    }
});