django ajax-CSDN博客

本文链接：https://blog.csdn.net/zhangludada/article/details/124285091

本文展示了如何在Django中使用AJAX进行GET和POST请求处理。通过`urls.py`设置路由，`views.py`定义视图函数，实现数据的接收与响应。在前端HTML中，利用XMLHttpRequest对象进行异步通信，动态更新页面内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

urls.py

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

views.py

from django.http import JsonResponse
from django.shortcuts import render
import json

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

def ajax(request):
    if request.method=='POST':
        # 把json转成字典
        data=json.loads(request.body)
        return JsonResponse(data)  # 返回字典
    elif request.method=='GET':
        data={'name':'zl'}
        return JsonResponse(data)  # 返回字典

index.html

send()的内容是字符串
xhr.response需要JSON.parse()才能当json使用

div=document.querySelector('div')

div.addEventListener('mouseover',function(){
	xhr=new XMLHttpRequest()
	xhr.open('GET','{% url 'ajax' %}')
	xhr.send()
	xhr.onreadystatechange=function(){
	    if(xhr.readyState===4 && xhr.status>=200 && xhr.status<300 ){
	        data=JSON.parse(xhr.response)
	        div.innerText=data.name
	    }
	}
})

div.addEventListener('click',function(){
	xhr=new XMLHttpRequest()
	xhr.open('POST','{% url 'ajax' %}')
	data={'name':'zhanglu'}
	// 转成字符串发送
	data=JSON.stringify(data)
	xhr.send(data)
	xhr.onreadystatechange=function(){
	    if(xhr.readyState===4 && xhr.status>=200 && xhr.status<300 ){
	        // 需要解析成json
	        data=JSON.parse(xhr.response)
	        div.innerText=data.name
	    }
	}
})