Django中使用AJAX

已于 2022-03-20 13:17:07 修改
阅读量7.6k 收藏 47
点赞数 7
分类专栏： Django 文章标签： django ajax jquery
于 2022-03-20 13:16:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40133285/article/details/123352006
版权

AJAX

AJAX是前端技术的集合，包括JavaScript、XML、HTML、CSS等。

AJAX的作用

提升用户体验。

JQuery

JQuery是一个兼容多种浏览器的JavaScript库。

JQuery的作用

JQuery简化JavaScript的使用，同理，简化AJAX的使用。

在线链接

Django版本：3.0.6
JQuery版本：1.12.4

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script>

AJAX的使用方法

urls.py

from django.urls import path
import Public.views

urlpatterns = [
    path('error/',Public.views.error),
]

views.py

from django.http import HttpResponse, request, response
from django.shortcuts import redirect, render, resolve_url
def error(request):
    if request.method == 'POST':
        num1 = request.POST.get('num1',0)
        num2 = request.POST.get('num2',0)
        num = int(num1)+int(num2)
        return HttpResponse(str(num))  #POST请求仅返回HttpResponse值
    return render(request, 'error.html')  #GET请求返回error.html界面

error.html #使用error界面进行测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>error</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script>
</head>
<body>
    <!-- 增加多个回车是为了明显显示是否会刷新界面 -->
    <br> 
	<input type="text" id="d1"> +
	<input type="text" id="d2"> =
	<input type="text" id="d3">
	<button id="btn">计算</button>
    <!-- 添加csrf_token -->
	{% csrf_token %} 
<script>
    $('#btn').click(function () {
		var csrf = $('input[name="csrfmiddlewaretoken"]').val();  //增加csrf变量将在data中传参以避免403错误
        // 朝后端发送ajax请求
        $.ajax({
            // 1.指定朝哪个后端发送ajax请求
            url:'', //不写就是朝当前地址提交【与form表单的action参数相同】
            // 2.请求方式
            type:'post',  // 不指定默认就是get，都是小写
            // 3.数据
            data:{'num1':$('#d1').val(), 'num2':$('#d2').val(),'csrfmiddlewaretoken': csrf},
            // 4.回调函数:当后端给你返回结果的时候会自动触发，args接受后端的返回结果
            success:function (args) {
                $('#d3').val(args)
            }
        })
    })
</script>
</body>
</html>

输出效果：输入2+2，点击计算，异步计算结果为4并返回前端

在这里插入图片描述

X3倍后代码

urls.py

from django.urls import path
import Public.views

urlpatterns = [
    path('error/',Public.views.error),
]

views.py

from django.http import HttpResponse, request, response
from django.shortcuts import redirect, render, resolve_url
def error(request):
    if request.method == 'POST':
        num1 = request.POST.get('num1',0)
        num2 = request.POST.get('num2',0)
        num = int(num1)+int(num2)
        return HttpResponse(str(num))  #POST请求仅返回HttpResponse值
    return render(request, 'error.html')  #GET请求返回error.html界面

error.html #使用error界面进行测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>error</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script>
</head>
<body>
    <!-- 增加多个回车是为了明显显示是否会刷新界面 -->
    <br> 
	<input type="text" id="d1"> +
	<input type="text" id="d2"> =
	<input type="text" id="d3">
	<button id="btn1">计算</button>
    <br> 
	<input type="text" id="d4"> +
	<input type="text" id="d5"> =
	<input type="text" id="d6">
	<button id="btn2">计算</button>
    <br> 
	<input type="text" id="d7"> +
	<input type="text" id="d8"> =
	<input type="text" id="d9">
	<button id="btn3">计算</button>
    <!-- 添加csrf_token -->
	{% csrf_token %} 
<script>
    $('#btn1').click(function () {
		var csrf = $('input[name="csrfmiddlewaretoken"]').val();  //增加csrf变量将在data中传参以避免403错误
        // 朝后端发送ajax请求
        $.ajax({
            // 1.指定朝哪个后端发送ajax请求
            url:'', //不写就是朝当前地址提交【与form表单的action参数相同】
            // 2.请求方式
            type:'post',  // 不指定默认就是get，都是小写
            // 3.数据
            data:{'num1':$('#d1').val(), 'num2':$('#d2').val(),'csrfmiddlewaretoken': csrf},
            // 4.回调函数:当后端给你返回结果的时候会自动触发，args接受后端的返回结果
            success:function (args) {
                $('#d3').val(args)
            }
        })
    })
    $('#btn2').click(function () {
		var csrf = $('input[name="csrfmiddlewaretoken"]').val();  //增加csrf变量将在data中传参以避免403错误
        // 朝后端发送ajax请求
        $.ajax({
            // 1.指定朝哪个后端发送ajax请求
            url:'', //不写就是朝当前地址提交【与form表单的action参数相同】
            // 2.请求方式
            type:'post',  // 不指定默认就是get，都是小写
            // 3.数据
            data:{'num1':$('#d4').val(), 'num2':$('#d5').val(),'csrfmiddlewaretoken': csrf},
            // 4.回调函数:当后端给你返回结果的时候会自动触发，args接受后端的返回结果
            success:function (args) {
                $('#d6').val(args)
            }
        })
    })
    $('#btn3').click(function () {
		var csrf = $('input[name="csrfmiddlewaretoken"]').val();  //增加csrf变量将在data中传参以避免403错误
        // 朝后端发送ajax请求
        $.ajax({
            // 1.指定朝哪个后端发送ajax请求
            url:'', //不写就是朝当前地址提交【与form表单的action参数相同】
            // 2.请求方式
            type:'post',  // 不指定默认就是get，都是小写
            // 3.数据
            data:{'num1':$('#d7').val(), 'num2':$('#d8').val(),'csrfmiddlewaretoken': csrf},
            // 4.回调函数:当后端给你返回结果的时候会自动触发，args接受后端的返回结果
            success:function (args) {
                $('#d9').val(args)
            }
        })
    })
</script>
</body>
</html>

输出效果：分别输入三组数值，点击不同的计算，异步计算结果后根据点击的计算返回前端
在这里插入图片描述在这里插入图片描述
在这里插入图片描述

for循环后代码

urls.py

from django.urls import path
import Public.views

urlpatterns = [
    path('error/',Public.views.error),
]

views.py

from django.http import HttpResponse, request, response
from django.shortcuts import redirect, render, resolve_url
def error(request):
    if request.method == 'POST':
        num1 = request.POST.get('num1',0)
        num2 = request.POST.get('num2',0)
        num = int(num1)+int(num2)
        return HttpResponse(str(num))  #POST请求仅返回HttpResponse值
    return render(request, 'error.html')  #GET请求返回error.html界面

error.html #使用error界面进行测试

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>error</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script>
</head>

<body>
    {% for i in '369'|make_list %}  <!-- for循环 -->
        <br>  <!-- 增加多个回车是为了明显显示是否会刷新界面 -->
        <input type="text" id="d{{i|add:-2}}"> +  <!-- id使用python计算 -->
        <input type="text" id="d{{i|add:-1}}"> =  <!-- id使用python计算 -->
        <input type="text" id="d{{i}}">  <!-- id使用python计算 -->
        <button class="btn" id="btn{{i}}">计算</button>  <!-- id使用python计算 -->
    {% endfor %}
    {% csrf_token %}  <!-- 添加csrf_token -->
    <script>
        $('.btn').click(function () {
            var csrf = $('input[name="csrfmiddlewaretoken"]').val();  //增加csrf变量将在data中传参以避免403错误
            var btn = $(this).attr('id')  //取id值
            var varnum1 = "#d"+(btn.replace("btn","")-2)  //取id值
            var varnum2 = "#d"+(btn.replace("btn","")-1)  //取id值
            var varnum3 = "#d"+(btn.replace("btn",""))  //取id值
            var num1 = $(varnum1).val()  //取id递增序号值
            var num2 = $(varnum2).val()  //取id递增序号值
            var num3 = $(varnum3).val()  //取id递增序号值
            // 朝后端发送ajax请求
            $.ajax({
                // 1.指定朝哪个后端发送ajax请求
                url: '', //不写就是朝当前地址提交【与form表单的action参数相同】
                // 2.请求方式
                type: 'post',  // 不指定默认就是get，都是小写
                // 3.数据
                data: { 'num1': num1, 'num2': num2, 'csrfmiddlewaretoken': csrf },
                // 4.回调函数:当后端给你返回结果的时候会自动触发，args接受后端的返回结果
                success: function (args) {
                    $(varnum3).val(args)
                }
            })
        })
    </script>
</body>

</html>

输出效果：分别输入三组数值，点击不同的计算，异步计算结果后根据点击的计算返回前端
在这里插入图片描述在这里插入图片描述
在这里插入图片描述

输入完成后单数据提交代码

urls.py

from django.urls import path
import Public.views

urlpatterns = [
    path('error/',Public.views.error),
]

views.py

def error(request):
    if request.method == 'POST':
        num1 = request.POST.get('num1',0)
        num2 = request.POST.get('num2',0)
        num = int(num1)+int(num2)
        return HttpResponse(str(num))  #POST请求仅返回HttpResponse值
    return render(request, 'error.html')  #GET请求返回error.html界面

error.html #使用error界面进行测试

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>error</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script>
</head>

<body onclick="click()">
    {% for i in '369'|make_list %}
    <!-- for循环 -->
    <br> <!-- 增加多个回车是为了明显显示是否会刷新界面 -->
    <input type="text" id="d{{i|add:-2}}"> +
    <!-- id使用python计算 -->
    <input type="text" id="d{{i|add:-1}}"> =
    <!-- id使用python计算 -->
    <input type="text" id="d{{i}}"> <!-- id使用python计算 -->
    <button class="btn" id="btn{{i}}">计算</button> <!-- id使用python计算 -->
    {% endfor %}
    {% csrf_token %}
    <!-- 添加csrf_token -->
    <script>
        $('.btn').click(function () {
            var csrf = $('input[name="csrfmiddlewaretoken"]').val();  //增加csrf变量将在data中传参以避免403错误
            var btn = $(this).attr('id')  //取id值
            var varnum1 = "#d" + (btn.replace("btn", "") - 2)  //取id值
            var varnum2 = "#d" + (btn.replace("btn", "") - 1)  //取id值
            var varnum3 = "#d" + (btn.replace("btn", ""))  //取id值
            var num1 = $(varnum1).val()  //取id递增序号值
            var num2 = $(varnum2).val()  //取id递增序号值
            var num3 = $(varnum3).val()  //取id递增序号值
            // 朝后端发送ajax请求
            $.ajax({
                // 1.指定朝哪个后端发送ajax请求
                url: '', //不写就是朝当前地址提交【与form表单的action参数相同】
                // 2.请求方式
                type: 'post',  // 不指定默认就是get，都是小写
                // 3.数据
                data: { 'num1': num1, 'num2': num2, 'csrfmiddlewaretoken': csrf },
                // 4.回调函数:当后端给你返回结果的时候会自动触发，args接受后端的返回结果
                success: function (args) {
                    $(varnum3).val(args)
                }
            })
        })
    </script>
    <script>
        document.addEventListener("mouseout", function (e) {  //获取光标事件
            var num = ($(e.target).attr('id')).replace("d", "").replace("btn", "")  //获取光标所在元素id
            if (num % 3 === 0) {
            }
            else if (num % 3 === 1) {
                num = parseInt(num) + 2
            }
            else if (num % 3 === 2) {
                num = parseInt(num) + 1
            }
            varnum = "#btn" + num
            $(varnum).click()
        });
        document.addEventListener("keydown", function (e) {  //获取按键事件
            if ((e.keyCode == 9) || (e.keyCode == 32) || (e.keyCode == 13) || ((((e.keyCode == 83)) && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)))) {  //当按键为Tab、Enter、Space、Ctrl+S时执行操作
                var num = (document.activeElement.id).replace("d", "").replace("btn", "")  //获取所在位置元素id
                if (num % 3 === 0) {
                }
                else if (num % 3 === 1) {
                    num = parseInt(num) + 2
                }
                else if (num % 3 === 2) {
                    num = parseInt(num) + 1
                }
                varnum = "#btn" + num
                $(varnum).click()
            }
        });
    </script>
</body>

</html>

输出效果：值输到哪里，哪里就会显示出结果，无须点击计算按钮
在这里插入图片描述最后把计算按钮隐藏一下

    <button hidden class="btn" id="btn{{i}}">计算</button> <!-- id使用python计算 -->

在这里插入图片描述

本来还想做一下一键全部提交代码、输入完成后全数据提交代码两个功能，但发现这样要提交的post值太多了，还是一次提交单个或单行数据比较靠谱

参考链接：
https://www.cnblogs.com/yangyi215/p/14964897.html
https://www.cnblogs.com/oldpai/p/9637774.html

-一脸懵逼-
关注
  • 7
    点赞
  • 踩
  • 47
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
django处理ajax,Django中实现ajax
weixin_35952362的博客
08-05 555
用ajax异步请求获取所有学生信息和并实现删除学生信息的操作，本实例所用的接口是文章DJango中实现restful中的接口。一、ajax的4种请求html页面代码展示所有学生信息$(function () {$('#showStus').click(function () {{#ajax 异步请求 get/post/put/patch等请求方式，传入两个参数，第一个参数是接口url，第二个参数是...
超详细教程-Django实现Ajax局部刷新
j1451284189的博客
01-10 4495
效果展示： 右侧div块展示博客详情 右侧div块展示新建博客 右侧div块展示新建博客 实现逻辑： 在一个DIV块展示不同的功能模块（查看博客，编辑博客，新建博客） 前端发起Ajax请求 后端使用render函数返回请求获取的内容 前端接收render的HTML模板渲染后的HTML内容，并将其展现在特定区域（div）块 相关代码： HTML： <div class="blog-detail" id="blog_detail"></div> JS： function add
Django之ajax
她°
04-08 1351
一.ajax简介 AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 二.异步加载 以知乎为例，我们没有输入验证码或者输入错误的验证码之后页面会提示请输入验证码，但是这个时候页面缺没有刷新，但...
Django环境下使用Ajax
最新发布
AZURE060606的博客
03-10 2254
AJAX 的主要目标是在不刷新整个页面的情况下，通过后台与服务器进行数据交换和更新页面内容。通过 AJAX，您可以向服务器发送请求并接收响应，然后使用 JavaScript 动态地更新页面的部分内容简单来说就是将后端数据进行加工后传给前端，再利用js对数据进行加工或判断后渲染到前端AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行，AJAX 使用异步交互与服务器进行通信同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
django ajax传参数
jacke121的专栏
09-15 4128
django ajax传参数
django ajax案例,AJAX入门学习-2：基于JS的AJAX实现(以Django为例)
weixin_33060753的博客
08-05 241
-------谢谢您的参考，如有疑问，欢迎交流一. ajax的实现操作流程实例对象：var xmlhttp = XMLHttprequest()连接server端：xmlhttp.open("")发送数据：xmlhttp.send("") # 请求体的内容 ，如果是GET请求就没有内容，内容在URL里面，写为send(null)监听：xmlhttp(if == 4:{var c...
Django中的ajax请求
12-23
需求：实现ajax请求，在界面上任意地方点击，可以成功传参。 创建项目如下所示： settings.py文件的设置，这次我们除了要注册app和设置...最后我们在视图文件中判断是否为ajax请求，代码如下： from django.shortcuts
Django中的Ajax
10-22
Django 是由 Python 开发的一个免费的开源网站框架，可以用于快速搭建高性能，优雅的网站.AJAX = Asynchronous JavaScript and XML（异步的 JavaScript ...接下来通过本文给大家介绍django中的ajax，希望对大家有所帮助
Django Ajax的使用教程
10-19
总结，Django中的AJAX使用涉及前端和后端的交互。前端使用jQuery的AJAX方法发送请求，处理响应，而Django后端则接收请求，处理数据，然后返回响应。通过这种方式，你可以创建更动态且高效的Web应用，提供更好的用户...
Django + ajax
Preke的专栏
08-06 2140
标签（空格分隔）： 未分类很多地方要用到ajax，还是要做一下的我想了一下思路： 比如说，我们就只做一个判断输入用户名的时候，不用刷新，在前端提示该用户是不是在数据库里的功能； 实现方法肯定是，我们写进输入框，然后焦点离开输入框之后，用ajax把输入框的内容传到后台，然后验证之后返回一个状态标识（用户名是否存在数据库的标识）然后我们就可以写出 首先简单写一个表单做示例<form action=
Django中使用Ajax进行前后台交互
热门推荐
柳汀轩
08-09 2万+
本文要实现的功能是：根据下拉列表的选项将数据库中对应的内容显示在页面，选定要排除的选项后，提交剩余的选项到数据库。为了方便前后台交互，利用了Ajax的GET和POST方法分别进行数据的获取和提交。 代码如下： &lt;!--利用获取的数据进行表单内容的填充--&gt; &lt;script&gt; $("#soft_id").change(function(){ var softtype=...
Django（八）：ajax请求(get+post)、cookie+session会话、登陆装饰器
Gym987的博客
10-28 648
1、ajax介绍 ajax异步的js和xml 普通请求：会携带整个页面提交，最明显的特征刷新页面，页面重置。好多的静态资源页面不需要刷新，并且刷新的时候可能阻塞整个服务。 缺点： 用户体验特别差 请求内容和响应内容冗余 基于上面的问题，ajax出现了 ajax能够发送局部的请求，页面整体不刷新，只是局部刷新 ajax可以发送一个异步请求，请求的过程中不会阻塞整个服务 ajax goo...
Django实战: 利用AJAX技术实现博文实时搜索
大江狗
05-31 2931
学习Python Web和Django开发不能只学习Python。我们有时必需借助其它技术比如AJAX实现我们想要的功能。今天我们就要利用Django 2.0 + AJAX开发一个功能性页面: 我们一边输入关键词，网页一边会给你提示所找到的博文数量。什么是AJAX技术？它的应用场景有哪些?Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和...
Django中使用ajax技术概述
秋叶夏风的博客
07-25 861
ajax 1.什么是ajax ajax就是在不刷新整个页面的情况下，去更新局部页面的内容（无刷新技术） 2.ajax有什么优点 最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。 使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。 可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担,基于标准化的并被广泛支持的技术，不...
Django框架下使用ajax模拟用户登录验证
人生苦短，我用Python
10-14 5574
Django是一个开源的Python基于web开发而设计的应用框架，基于MVC的设计思想，大大简化了网站开发的难度，能够简单快速的开发网站。其中封装的大量函数和方法，可以直接调用，同时扩展性非常好，可以扩展第三方插件。框架的主要三部分M（模型）V（视图）T（模板）是基于MVC的思想在Django内的结构，其中V接受浏览器的信息传递给M把数据存进数据库，还可以接受M的返回结果让T产生一个HTML页面
django的传参和ajax实现步骤
zhangli709的博客
05-11 2275
笔记 任务，实现闪购 datetime, timedelta from datetime import datetime, timedelta 1. timedelta(days=1) 2. timedelta(hours=1) 3. timedelta(minutes=1) 中间键，过期时间， response.set_cookie(‘ticket’,ticket,max...
Python：django之ajax post传参的两种格式
weixin_42161670的博客
05-10 468
假设有如下表单，需要将这些表单用ajax传参的方式传给后台，该怎么做呢… 我们知道ajax传参的格式为$.post(“地址”,参数,function(返回值){})，套用这个格式进行传参，有以下两种方法： 方法一：提交表单中的部分字段 我们可以获取用户名，密码等内容，将其拼接成一个字典(想传什么就将其拼接成字典格式，没有特殊限制，你甚至可以单独的只传一个用户名)，将其作为参数传给后台 例： {‘username’:username,‘password’:password,‘csrfmiddlewareto
Django ajax
wjc272008的专栏
08-27 1202
$(document).ajaxSend(function(event, xhr, settings) {       function getCookie(name) {           var cookieValue = null;           if (document.cookie && document.cookie != '') {
django中使用ajax请求put方法时,会提示405,请问如何解决
04-26
您好，关于django中使用ajax请求put方法时提示405的问题，可能是因为django默认不支持HTTP的PUT或DELETE方法，需要手动添加相应的支持。您可以在views.py的函数中添加如下代码： ```python from django.views.decorators.csrf import csrf_exempt from django.http import JsonResponse @csrf_exempt def my_view(request): if request.method == 'PUT': # 处理PUT请求的代码 return JsonResponse({"message": "PUT请求成功"}) else: return JsonResponse({"message": "请求方法不被支持"}) ``` 需要注意的是，由于这种做法会禁用CSRF保护，存在一定的安全风险，所以需要谨慎使用。另外，在前端使用ajax发送PUT请求时，需要设置相应的headers，如下所示： ```javascript $.ajax({ url: url, type: 'PUT', headers: {'X-CSRFToken': csrf_token}, // csrf_token需要从cookie中获取 data: data, success: function(result) { // 处理返回结果 } }); ``` 希望能够帮到您，如有其他问题，欢迎继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值