首页 > 资讯 > 后端开发 > Python >Django中使用AJAX的详细过程

117

分享到

Django中使用AJAX的详细过程

2024-04-02 19:04:59 117人浏览泡泡鱼

Python 官方文档：入门教程 => 点击学习

摘要

目录ajaxAJAX的作用JqueryJQuery的作用AJAX的使用方法X3倍后代码for循环后代码输入完成后单数据提交代码总结 AJAX AJAX是前端技术的集合，包括

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

总结

到此这篇关于Django中使用AJAX的文章就介绍到这了,更多相关Django使用AJAX内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

您可能感兴趣的文档:

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Django中使用AJAX的详细过程

本文链接: https://www.lsjlt.com/news/120921.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

Django中使用AJAX的详细过程

目录AJAXAJAX的作用JQueryJQuery的作用AJAX的使用方法X3倍后代码for循环后代码输入完成后单数据提交代码总结 AJAX AJAX是前端技术的集合，包括...

99+

2022-11-11
Uniapp中使用Echarts的详细过程

目录Uniapp中使用Echarts一、视图层二、逻辑层三、样式uni-app微信小程序使用echarts图表Uniapp中使用Echarts 这里只举例折线图。一、视图层画图...

99+

2022-11-13

小程序使用echarts Uniapp使用Echarts
在JavaScript中使用mqtt.js的详细过程

目录ActiveMQ使用(二):在JavaScript中使用mqtt.js1. 环境准备 jQuery-1.102. 相关代码3. 结果展示3.1 连接3.2 订阅3.3 发送消息3...

99+

2023-05-16

js使用mqtt.js js mqtt.js
ChatGPT在IDEA中使用的详细过程

目录安装1.Settings2. Plugins>MarketPlace3.搜索chatgpt并安装（本人已安装）配置URL 设置默认官方源自定义Clou...

99+

2023-02-18

idea使用ChatGPT idea整合ChatGPT idea ChatGPT
vue3 中使用 jsx 开发的详细过程

目录安装 JSX 插件使用语法差异模板指令事件修饰符v-forv-on插槽安装 JSX 插件在 Vue2 中要想使用 jsx 开发，需要安装 @vue/babel-preset-j...

99+

2022-11-13
在.NET Core中使用CSRedis的详细过程

目录CSRedis开始之前字符串(string)使用CSRedis进行简单操作非正常情况列表(list)集合(set)散列(hashmap)有序集合事务Key的过期引用CSRedis...

99+

2022-11-13
Django 使用VScode 创建工程的详细步骤

目录一、VSCode 创建Django 工程二、Django Template HTML 代码提示三、安装插件四、启动项目报错一、VSCode 创建Django 工程 VSCode ...

99+

2022-11-11
centos8中使用yum安装 nginx的详细过程

目录centos8中怎样使用yum安装 nginxyum 直接安装使用vim编辑nginx基本命令centos8中怎样使用yum安装 nginx centos8 安装 nginx y...

99+

2023-03-06

centos8使用yum安装 nginx centos8安装 nginx centos8使用yum
centos8使用Docker部署Django项目的详细教程

引言在本文中将介绍在docker中通过django + uwsgi + nginx部署方式部署Django项目，由于记录的是学习过程，使用的都是目前较高的版本。 python 版本为3.8.3 djan...

99+

2022-06-04

docker部署django项目 centos8 docker部署django
mysql的安装与使用的详细过程

这篇文章主要介绍“mysql的安装与使用的详细过程”，在日常操作中，相信很多人在mysql的安装与使用的详细过程问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”mysql的安装...

99+

2022-10-18
MySQL中存储过程的详细详解

目录概述优点缺点mysql存储过程的定义存储过程的基本语句格式存储过程的使用定义一个存储过程定义一个有参数的存储过程定义一个流程控制语句 IF ELSE定义一个条件控制语句 CASE定义一个循环语句 WHILE定义一个循...

99+

2022-06-26

mysql存储过程实例详解数据库存储过程 mysql创建存储过程的语句
使用Pytorch+PyG实现MLP的详细过程

目录我的项目环境：一、导入相关库二、加载Cora数据集三、定义MLP网络四、定义模型五、模型训练六、模型验证七、结果总结我的项目环境：平台：Windows10语言环境：python...

99+

2023-03-03

pytorch mlp分类模型 pytorch pyg
django项目、vue项目部署云服务器的详细过程

目录上线架构图服务器购买与远程连接安装git安装mysql安装redis(源码安装)安装python3.8(源码安装)安装uwsgi安装虚拟环境安装nginx(源码安装)vue项目部...

99+

2022-11-13
MySQL中的存储过程（详细篇）

文章目录概述优点缺点 MySQL存储过程的定义存储过程的基本语句格式存储过程的使用定义一个存储过程定义一个有参数的存储过程定义一个流程控制语句 IF ELSE定义一个条件控制语句 CASE定义一个循环语句 WHILE定义一个循...

99+

2023-08-16

mysql 开发语言数据库
Unity 使用tiledmap解析地图的详细过程

1、先使用tiledmap编辑地图，图层用来刷图块，对象用来定义单个格子的数据 2、为每个图块调属性 3、图块需要单独配置属性的就必须创建对象，并设置值右键设置...

99+

2022-11-13
minio安装部署及使用的详细过程

目录一、服务器安装minio1.进行下载2.新建minio安装目录，执行如下命令二、进行访问，并设置桶1.访问三、springboot进行实现1.引入依赖2.在 appl...

99+

2022-11-13
使用Docker搭建ApacheKafka环境的详细过程

目录安装单个节点docker-compose.yml 配置安装集群环境docker-compose.yml配置启动kafka集群总结Docker是最受欢迎的容器引擎之一，软件行业用于...

99+

2022-11-13

Docker Apache Kafka环境 Docker搭建 Kafka环境
Mac下github的基本使用（有详细过程）

一、github准备 1.注册github账号 https://github.com 按照提示进行注册 2.查看git版本由于macOS默认安装了git 在终端输入 git -v ...

99+

2023-09-07

github macos git Powered by 金山文档
教你使用PLSQLDeveloper14连接Oracle11g的详细过程

目录一、环境配置1.安装PLSQLDeveloper142.下载并解压Oracle客户端3.配置window操作系统环境变量二、工具配置1.Oracle客户端配置2.PLSQLDev...

99+

2022-11-12
Oracle存储过程与函数的详细使用教程

目录一、存储过程1、存储过程的创建2、存储过程的调用及删除3、存储过程的使用4、存储过程的查询二、函数1、函数的创建2、函数的调用与删除3、函数的使用4、函数的查询补充：存储过程与存储函数的区别和联系总结一、存储过程存...

99+

2022-07-18

oracle查看存储过程 oracle存储过程怎么调用 oracle存储过程和函数的区别