Django与Ajax

最新推荐文章于 2025-04-03 17:54:07 发布

给你骨质唱疏松

最新推荐文章于 2025-04-03 17:54:07 发布

阅读量1.1k

点赞数 3

分类专栏： django web前端 python 文章标签： python ajax web django serializers

本文链接：https://blog.csdn.net/songhaixing2/article/details/115255736

版权

本文详细介绍了Ajax的基础知识和Django中与Ajax的结合应用，包括Ajax的异步提交、局部刷新，以及前后端数据传输编码格式。通过实例展示了如何使用Ajax进行登录验证、文件上传，以及发送JSON格式数据。同时探讨了Django的序列化组件及其使用。

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

一.Ajax简介

1.什么是Ajax

AJAX（Asynchronous Javascript And XML）翻译成中文就是 “异步Javascript和XML”
即使用Javascript语言与服务器进行异步交互，传输的数据为XML
当然，传输的数据不只是XML,现在更多使用json数据
通俗的讲 : 它是一种创建交互式网页应用的网页开发技术

2.Ajax特点

异步提交
浏览器页面局部刷新 : 这一特点给用户的感受是在不知不觉中完成请求和响应过程

3.异步与同步提交

同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求

4.前端向后端发起请求方式

地址栏输入url回车 : GET
a标签href属性指定的url : GET
form表单中的submit与button类型 : GET/POST
ajax请求 : GET/POST
注意 : 如果不想触发form表单提交, 1.按钮可以不写在form表单中,2.使用input,类型为button

ps : 原生js写的ajax非常麻烦, 需要兼容多种浏览器, 并且企业也基本不会用, 下面的学习我们只基于jQuery的Ajax实现, 并不只有jQuery能够实现ajax，其他的框架也可以但是换汤不换药, 原理是一样的

二.Ajax入门小示例

1.需求

页面三个输入框和一个’‘计算’'按钮
在前两个输入框内输入数字, 点击计算按钮, 在第三个输入框内动态展示前两数字乘积
使用Ajax向后端提交请求, 页面不能进行刷新
计算必须在后端进行

2.代码示例

路由层 urls.py 文件

from django.contrib import admin
from django.urls import path,re_path
from app01 import views

urlpatterns = [
    path('admin/', admin.site.urls),
    re_path('^ajax/', views.ajax_test),
    re_path('^pro/', views.product),
]

视图层 views.py 文件

def ajax_test(request):
    return render(request,'ajax.html')

def product(request):
    if request.method == "POST":
        a1 = request.POST.get('a1')
        a2 = request.POST.get('a2')
        a = int(a1)*int(a2)
        return HttpResponse(a)

模板层 ajax.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {% load static %}
    <script src="{% static 'jquery-3.4.1/jquery.min.js' %}"></script>
    <link href="{% static 'bootstrap-3.3.7/css/bootstrap.min.css' %}" rel="stylesheet">
    <script src="{% static 'bootstrap-3.3.7/js/bootstrap.min.js' %}"></script>
</head>
<body>

<input type="number" class="form-control text-center" id="a1">
<p class="text-center">x</p>
<input type="number" class="form-control text-center" id="a2">
<p class="text-center">=</p>
<input type="number" class="form-control text-center" id="a3">
<button class="btn btn-warning btn-block">计算</button>

<script>
    // 设置点击事件
    $('.btn').click(function (){
    
        // 朝后端发送ajax请求
        $.ajax({
    
            // 指定后端地址,不指定则提交到当前地址
            url:'/pro/',
            // 指定请求方式,不指定默认get
            method:'post',
            // 需要发送的数据
            data:{
    'a1':$('#a1').val(),'a2':$('#a2').val()}