中国红客联盟国际站联盟介绍联盟架构联盟章程发展历程联盟邮箱积分VIP捐助联盟收藏本站
请登录
立即注册
门户首页
交流社区BBS
技术圈子Group
关于我们
红客大事记
插件Plugin
搜索
当前位置:»交流社区 › 中国红客联盟【技术分享区】 › 编程脚本交流 › Django中使用AJAX的详细过程

[Python] Django中使用AJAX的详细过程

2165 0
王子 2022-11-6 09:40:47 | 显示全部楼层 |阅读模式
目录

    AJAX
      AJAX的作用
    JQuery
      JQuery的作用
    AJAX的使用方法X3倍后代码for循环后代码输入完成后单数据提交代码总结


AJAX

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

AJAX的作用

提升用户体验。

JQuery

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

JQuery的作用

JQuery简化JavaScript的使用，同理，简化AJAX的使用。
在线链接
Django版本：3.0.6
JQuery版本：1.12.4
  1. <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script>
复制代码
AJAX的使用方法

urls.py
  1. from django.urls import path
  2. import Public.views
  4. urlpatterns = [
  5.     path('error/',Public.views.error),
  6. ]
复制代码
views.py
  1. from django.http import HttpResponse, request, response
  2. from django.shortcuts import redirect, render, resolve_url
  3. def error(request):
  4.     if request.method == 'POST':
  5.         num1 = request.POST.get('num1',0)
  6.         num2 = request.POST.get('num2',0)
  7.         num = int(num1)+int(num2)
  8.         return HttpResponse(str(num))  #POST请求仅返回HttpResponse值
  9.     return render(request, 'error.html')  #GET请求返回error.html界面
复制代码
error.html #使用error界面进行测试
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>error</title>
  6.     <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script>
  7. </head>
  8. <body>
  9.     <!-- 增加多个回车是为了明显显示是否会刷新界面 -->
  10.     <br>
  11.         <input type="text" id="d1"> +
  12.         <input type="text" id="d2"> =
  13.         <input type="text" id="d3">
  14.         <button id="btn">计算</button>
  15.     <!-- 添加csrf_token -->
  16.         {% csrf_token %}
  17. <script>
  18.     $('#btn').click(function () {
  19.                 var csrf = $('input[name="csrfmiddlewaretoken"]').val();  //增加csrf变量将在data中传参以避免403错误
  20.         // 朝后端发送ajax请求
  21.         $.ajax({
  22.             // 1.指定朝哪个后端发送ajax请求
  23.             url:'', //不写就是朝当前地址提交【与form表单的action参数相同】
  24.             // 2.请求方式
  25.             type:'post',  // 不指定默认就是get，都是小写
  26.             // 3.数据
  27.             data:{'num1':$('#d1').val(), 'num2':$('#d2').val(),'csrfmiddlewaretoken': csrf},
  28.             // 4.回调函数:当后端给你返回结果的时候会自动触发，args接受后端的返回结果
  29.             success:function (args) {
  30.                 $('#d3').val(args)
  31.             }
  32.         })
  33.     })
  34. </script>
  35. </body>
  36. </html>
复制代码
输出效果：输入2+2，点击计算，异步计算结果为4并返回前端



X3倍后代码

urls.py
  1. from django.urls import path
  2. import Public.views
  4. urlpatterns = [
  5.     path('error/',Public.views.error),
  6. ]
复制代码
views.py
  1. from django.http import HttpResponse, request, response
  2. from django.shortcuts import redirect, render, resolve_url
  3. def error(request):
  4.     if request.method == 'POST':
  5.         num1 = request.POST.get('num1',0)
  6.         num2 = request.POST.get('num2',0)
  7.         num = int(num1)+int(num2)
  8.         return HttpResponse(str(num))  #POST请求仅返回HttpResponse值
  9.     return render(request, 'error.html')  #GET请求返回error.html界面
复制代码
error.html #使用error界面进行测试
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>error</title>
  6.     <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script>
  7. </head>
  8. <body>
  9.     <!-- 增加多个回车是为了明显显示是否会刷新界面 -->
  10.     <br>
  11.         <input type="text" id="d1"> +
  12.         <input type="text" id="d2"> =
  13.         <input type="text" id="d3">
  14.         <button id="btn1">计算</button>
  15.     <br>
  16.         <input type="text" id="d4"> +
  17.         <input type="text" id="d5"> =
  18.         <input type="text" id="d6">
  19.         <button id="btn2">计算</button>
  20.     <br>
  21.         <input type="text" id="d7"> +
  22.         <input type="text" id="d8"> =
  23.         <input type="text" id="d9">
  24.         <button id="btn3">计算</button>
  25.     <!-- 添加csrf_token -->
  26.         {% csrf_token %}
  27. <script>
  28.     $('#btn1').click(function () {
  29.                 var csrf = $('input[name="csrfmiddlewaretoken"]').val();  //增加csrf变量将在data中传参以避免403错误
  30.         // 朝后端发送ajax请求
  31.         $.ajax({
  32.             // 1.指定朝哪个后端发送ajax请求
  33.             url:'', //不写就是朝当前地址提交【与form表单的action参数相同】
  34.             // 2.请求方式
  35.             type:'post',  // 不指定默认就是get，都是小写
  36.             // 3.数据
  37.             data:{'num1':$('#d1').val(), 'num2':$('#d2').val(),'csrfmiddlewaretoken': csrf},
  38.             // 4.回调函数:当后端给你返回结果的时候会自动触发，args接受后端的返回结果
  39.             success:function (args) {
  40.                 $('#d3').val(args)
  41.             }
  42.         })
  43.     })
  44.     $('#btn2').click(function () {
  45.                 var csrf = $('input[name="csrfmiddlewaretoken"]').val();  //增加csrf变量将在data中传参以避免403错误
  46.         // 朝后端发送ajax请求
  47.         $.ajax({
  48.             // 1.指定朝哪个后端发送ajax请求
  49.             url:'', //不写就是朝当前地址提交【与form表单的action参数相同】
  50.             // 2.请求方式
  51.             type:'post',  // 不指定默认就是get，都是小写
  52.             // 3.数据
  53.             data:{'num1':$('#d4').val(), 'num2':$('#d5').val(),'csrfmiddlewaretoken': csrf},
  54.             // 4.回调函数:当后端给你返回结果的时候会自动触发，args接受后端的返回结果
  55.             success:function (args) {
  56.                 $('#d6').val(args)
  57.             }
  58.         })
  59.     })
  60.     $('#btn3').click(function () {
  61.                 var csrf = $('input[name="csrfmiddlewaretoken"]').val();  //增加csrf变量将在data中传参以避免403错误
  62.         // 朝后端发送ajax请求
  63.         $.ajax({
  64.             // 1.指定朝哪个后端发送ajax请求
  65.             url:'', //不写就是朝当前地址提交【与form表单的action参数相同】
  66.             // 2.请求方式
  67.             type:'post',  // 不指定默认就是get，都是小写
  68.             // 3.数据
  69.             data:{'num1':$('#d7').val(), 'num2':$('#d8').val(),'csrfmiddlewaretoken': csrf},
  70.             // 4.回调函数:当后端给你返回结果的时候会自动触发，args接受后端的返回结果
  71.             success:function (args) {
  72.                 $('#d9').val(args)
  73.             }
  74.         })
  75.     })
  76. </script>
  77. </body>
  78. </html>
复制代码
输出效果：分别输入三组数值，点击不同的计算，异步计算结果后根据点击的计算返回前端







for循环后代码

urls.py
  1. from django.urls import path
  2. import Public.views
  4. urlpatterns = [
  5.     path('error/',Public.views.error),
  6. ]
复制代码
views.py
  1. from django.http import HttpResponse, request, response
  2. from django.shortcuts import redirect, render, resolve_url
  3. def error(request):
  4.     if request.method == 'POST':
  5.         num1 = request.POST.get('num1',0)
  6.         num2 = request.POST.get('num2',0)
  7.         num = int(num1)+int(num2)
  8.         return HttpResponse(str(num))  #POST请求仅返回HttpResponse值
  9.     return render(request, 'error.html')  #GET请求返回error.html界面
复制代码
error.html #使用error界面进行测试
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>error</title>
  7.     <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script>
  8. </head>
  10. <body>
  11.     {% for i in '369'|make_list %}  <!-- for循环 -->
  12.         <br>  <!-- 增加多个回车是为了明显显示是否会刷新界面 -->
  13.         <input type="text" id="d{{i|add:-2}}"> +  <!-- id使用python计算 -->
  14.         <input type="text" id="d{{i|add:-1}}"> =  <!-- id使用python计算 -->
  15.         <input type="text" id="d{{i}}">  <!-- id使用python计算 -->
  16.         <button class="btn" id="btn{{i}}">计算</button>  <!-- id使用python计算 -->
  17.     {% endfor %}
  18.     {% csrf_token %}  <!-- 添加csrf_token -->
  19.     <script>
  20.         $('.btn').click(function () {
  21.             var csrf = $('input[name="csrfmiddlewaretoken"]').val();  //增加csrf变量将在data中传参以避免403错误
  22.             var btn = $(this).attr('id')  //取id值
  23.             var varnum1 = "#d"+(btn.replace("btn","")-2)  //取id值
  24.             var varnum2 = "#d"+(btn.replace("btn","")-1)  //取id值
  25.             var varnum3 = "#d"+(btn.replace("btn",""))  //取id值
  26.             var num1 = $(varnum1).val()  //取id递增序号值
  27.             var num2 = $(varnum2).val()  //取id递增序号值
  28.             var num3 = $(varnum3).val()  //取id递增序号值
  29.             // 朝后端发送ajax请求
  30.             $.ajax({
  31.                 // 1.指定朝哪个后端发送ajax请求
  32.                 url: '', //不写就是朝当前地址提交【与form表单的action参数相同】
  33.                 // 2.请求方式
  34.                 type: 'post',  // 不指定默认就是get，都是小写
  35.                 // 3.数据
  36.                 data: { 'num1': num1, 'num2': num2, 'csrfmiddlewaretoken': csrf },
  37.                 // 4.回调函数:当后端给你返回结果的时候会自动触发，args接受后端的返回结果
  38.                 success: function (args) {
  39.                     $(varnum3).val(args)
  40.                 }
  41.             })
  42.         })
  43.     </script>
  44. </body>
  46. </html>
复制代码
输出效果：分别输入三组数值，点击不同的计算，异步计算结果后根据点击的计算返回前端







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

urls.py
  1. from django.urls import path
  2. import Public.views
  4. urlpatterns = [
  5.     path('error/',Public.views.error),
  6. ]
复制代码
views.py
  1. def error(request):
  2.     if request.method == 'POST':
  3.         num1 = request.POST.get('num1',0)
  4.         num2 = request.POST.get('num2',0)
  5.         num = int(num1)+int(num2)
  6.         return HttpResponse(str(num))  #POST请求仅返回HttpResponse值
  7.     return render(request, 'error.html')  #GET请求返回error.html界面
复制代码
error.html #使用error界面进行测试
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>error</title>
  7.     <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script>
  8. </head>
  10. <body >
  11.     {% for i in '369'|make_list %}
  12.     <!-- for循环 -->
  13.     <br> <!-- 增加多个回车是为了明显显示是否会刷新界面 -->
  14.     <input type="text" id="d{{i|add:-2}}"> +
  15.     <!-- id使用python计算 -->
  16.     <input type="text" id="d{{i|add:-1}}"> =
  17.     <!-- id使用python计算 -->
  18.     <input type="text" id="d{{i}}"> <!-- id使用python计算 -->
  19.     <button class="btn" id="btn{{i}}">计算</button> <!-- id使用python计算 -->
  20.     {% endfor %}
  21.     {% csrf_token %}
  22.     <!-- 添加csrf_token -->
  23.     <script>
  24.         $('.btn').click(function () {
  25.             var csrf = $('input[name="csrfmiddlewaretoken"]').val();  //增加csrf变量将在data中传参以避免403错误
  26.             var btn = $(this).attr('id')  //取id值
  27.             var varnum1 = "#d" + (btn.replace("btn", "") - 2)  //取id值
  28.             var varnum2 = "#d" + (btn.replace("btn", "") - 1)  //取id值
  29.             var varnum3 = "#d" + (btn.replace("btn", ""))  //取id值
  30.             var num1 = $(varnum1).val()  //取id递增序号值
  31.             var num2 = $(varnum2).val()  //取id递增序号值
  32.             var num3 = $(varnum3).val()  //取id递增序号值
  33.             // 朝后端发送ajax请求
  34.             $.ajax({
  35.                 // 1.指定朝哪个后端发送ajax请求
  36.                 url: '', //不写就是朝当前地址提交【与form表单的action参数相同】
  37.                 // 2.请求方式
  38.                 type: 'post',  // 不指定默认就是get，都是小写
  39.                 // 3.数据
  40.                 data: { 'num1': num1, 'num2': num2, 'csrfmiddlewaretoken': csrf },
  41.                 // 4.回调函数:当后端给你返回结果的时候会自动触发，args接受后端的返回结果
  42.                 success: function (args) {
  43.                     $(varnum3).val(args)
  44.                 }
  45.             })
  46.         })
  47.     </script>
  48.     <script>
  49.         document.addEventListener("mouseout", function (e) {  //获取光标事件
  50.             var num = ($(e.target).attr('id')).replace("d", "").replace("btn", "")  //获取光标所在元素id
  51.             if (num % 3 === 0) {
  52.             }
  53.             else if (num % 3 === 1) {
  54.                 num = parseInt(num) + 2
  55.             }
  56.             else if (num % 3 === 2) {
  57.                 num = parseInt(num) + 1
  58.             }
  59.             varnum = "#btn" + num
  60.             $(varnum).click()
  61.         });
  62.         document.addEventListener("keydown", function (e) {  //获取按键事件
  63.             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时执行操作
  64.                 var num = (document.activeElement.id).replace("d", "").replace("btn", "")  //获取所在位置元素id
  65.                 if (num % 3 === 0) {
  66.                 }
  67.                 else if (num % 3 === 1) {
  68.                     num = parseInt(num) + 2
  69.                 }
  70.                 else if (num % 3 === 2) {
  71.                     num = parseInt(num) + 1
  72.                 }
  73.                 varnum = "#btn" + num
  74.                 $(varnum).click()
  75.             }
  76.         });
  77.     </script>
  78. </body>
  80. </html>
复制代码
输出效果：值输到哪里，哪里就会显示出结果，无须点击计算按钮


最后把计算按钮隐藏一下
  1.     <button hidden class="btn" id="btn{{i}}">计算</button> <!-- id使用python计算 -->
复制代码


本来还想做一下一键全部提交代码、输入完成后全数据提交代码两个功能，但发现这样要提交的post值太多了，还是一次提交单个或单行数据比较靠谱
参考链接：
    https://www.cnblogs.com/yangyi215/p/14964897.htmlhttps://www.cnblogs.com/oldpai/p/9637774.html

总结

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

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

王子

创始人

关注
  • 1101
    主题
  • 105
    粉丝
  • 59
    关注
这家伙很懒，什么都没留下！

中国红客联盟公众号

联系站长QQ：5520533

admin@chnhonker.com
Copyright © 2001-2025 Discuz Team. Powered by Discuz! X3.5 ( 粤ICP备13060014号 )|天天打卡 本站已运行天