AJAX简介

局部刷新，异步提交。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。它最大的有点就是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

浏览器朝后端发送请求的方式：

访问方式 请求方式
浏览器地址栏输入url访问 GET请求
a标签href属性 GET请求
form表单 GET/POST请求
ajax GET/POST请求

这里的Ajax是jQuery封装之后的版本，所以在前端页面使用的时候要确保导入了jQuery。

AJAX实现局部刷新求和案例

在浏览器页面inpu框输入数字，点击提交按钮，向后端发送AJAX请求，后端计算出结果，在返回到前端页面，动态展示到第三个input框中，整个页面不刷新。

urls.py 路由
  1. from django.conf.urls import url
  2. from django.contrib import admin
  3. from app01 import views
  5. urlpatterns = [
  6.     url(r'^admin/', admin.site.urls),
  7.     url(r'^calculate/', views.calculate)
  8. ]
views.py
  1. def calculate(request):
  2.     if request.is_ajax():  # 判断是否是ajax请求
  3.         # print(request.POST)
  4.         num1 = request.POST.get('num1')
  5.         num2 = request.POST.get('num2')
  6.         # 先转成整型在相加
  7.         sum_3 = int(num1)+int(num2)
  8.         # 返回的是字符串直接用HttpResponse
  9.         return HttpResponse(sum_3)
  10.     return render(request, 'calculate.html')
calculate.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>calculate</title>
  6.     {% load static %}
  7.  <link rel="stylesheet" type="text/css" href="{% static 'CSS/bootstrap.css' %}"/>
  8.     <script src="{% static 'JS/bootstrap.min.js' %}"></script>
  9.     <script src="{% static 'jQuery/jquery-3.6.0.min.js' %}"></script>
  10. {# 在前端页面使用ajax务必导入jQuery #}
  11. </head>
  12. <body>
  13. <input type="text" id="inp1">+
  14. <input type="text" id="inp2">=
  15. <input type="text" id="inp3">
  16. <button id="btn">计算</button>
  17. <script>
  18.     // 先给按钮绑定一个点击事件
  19.     $('#btn').click(function (){
  20.         // 朝后端发送ajax请求
  21.         $.ajax({
  22.             // 1.指定朝哪个后端发送ajax请求
  23.             url:'', // 不写就是朝当前地址提交
  24.             // 2.请求方式
  25.             type:'post', // 不指定默认就是get 都是小写
  26.            // 3.数据 获取到两个input框的值 发送给视图层做逻辑处理
  27.             data:{'num1':$('#inp1').val(),'num2':$('#inp2').val()},
  28.             // 4.回调函数：当后端给你返回结果的时候会触发 args接收后端返回的结果
  29.             success:function(args){
  30.                // 5.通过DOM操作动态渲染到第三个input框里面
  31.                 $('#inp3').val(args)
  32.             }
  33.         })
  34.         }
  35.     )
  36. </script>
  37. </body>
  38. </html>

AJAX数据格式转化

ajax在实际业务中往往返回的不是字符串而是字典，那如果数据格式是字典的话，该怎样进行格式之间的转换呢？

第一种方法json

HttpResponse字典是不能直接返回的，需要将它转换成字符串格式，这时后我们就需要用到json进行序列化。

views.py
  1. import json
  2. def data(request):
  3.     if request.is_ajax():
  4.         print(request.POST)
  5.         # 前面加状态码是比较标准的格式
  6.         back_dic = {'code': 200, 'msg': '请求失败', 'data': {'username': 'jesse'}}
  7.         return HttpResponse(json.dumps(back_dic))
  8.     return render(request, 'data.html')

而针对后端传过来的字符串，前端是没办法对字符串化的字典进行取值操作的，所以需要在前端进行反序列化，将它变成html里面的Object类型，这样就可以用点语法将要去的值直接取出来。

data.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>calculate</title>
  6.     {% load static %}
  7.     <link rel="stylesheet" type="text/css" href="{% static 'CSS/bootstrap.css' %}"/>
  8.     <script src="{% static 'JS/bootstrap.min.js' %}"></script>
  9.     <script src="{% static 'jQuery/jquery-3.6.0.min.js' %}"></script>
  10.     {# 在前端页面使用ajax无比导入jQuery #}
  11. </head>
  12. <body>
  13. <input type="text" id="inp1">
  14. <button id="btn">获取</button>
  15. <input type="text" id="inp2">
  16. <script>
  17.     $('#btn').click(function () {
  18.         $.ajax({
  19.             url: '',
  20.             type: 'post',
  21.             data: {'d1': $('#inp1').val()},
  22.             success:function (args){
  23.                 // 反序列化 让后端发送过来的字符串变成js里面的对象
  24.                 args = JSON.parse(args)
  25.                 console.log(typeof args)  // 返回的是object格式
  26.                 // 可以针对状态码做一个判断
  27.                 if (args.code == 200){
  28.                     $('#inp2').val(args.data.username)  // js里面的object取值就可以用点语法
  29.                 }else{
  30.                    alert(args.msg)
  31.                 }
  32.             }
  33.         })
  34.     })
  35. </script>
  36. </body>
  37. </html>

第二种方式JsonResponse

使用JsonResonse进行序列化，这样在html页面就不需要，进行反序列化了。

views.py
  1. from django.http import JsonResponse
  2. # 需要导一下模块
  4. def data(request):
  5.     if request.is_ajax():
  6.         print(request.POST)
  7.         # 前面加状态码是比较标准的格式
  8.         back_dic = {'code': 200, 'msg': '请求失败', 'data': {'username': 'jesse'}}
  9.         return JsonResponse(back_dic)
  10.     return render(request, 'data.html')
data.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>calculate</title>
  6.     {% load static %}
  7.     <link rel="stylesheet" type="text/css" href="{% static 'CSS/bootstrap.css' %}"/>
  8.     <script src="{% static 'JS/bootstrap.min.js' %}"></script>
  9.     <script src="{% static 'jQuery/jquery-3.6.0.min.js' %}"></script>
  10.     {# 在前端页面使用ajax无比导入jQuery #}
  11. </head>
  12. <body>
  13. <input type="text" id="inp1">
  14. <button id="btn">获取</button>
  15. <input type="text" id="inp2">
  16. <script>
  17.     $('#btn').click(function () {
  18.         $.ajax({
  19.             url: '',
  20.             type: 'post',
  21.             data: {'d1': $('#inp1').val()},
  22.             success:function (args){
  23.                 console.log(typeof args)  // 返回的是object格式
  24.                 // 可以针对状态码做一个判断
  25.                 if (args.code == 200){
  26.                     $('#inp2').val(args.data.username)  // js里面的object取值就可以用点语法
  27.                 }else{
  28.                    alert(args.msg)
  29.                 }
  30.             }
  31.         })
  32.     })
  33. </script>
  34. </body>
  35. </html

第三种方法前端指定json数据格式

  1. $.ajax({
  2.             url: '',
  3.             type: 'post',
  4.             data: {'d1': $('#inp1').val()},
  5.             dataType:'json',
  6.             success:function (args){
  7.                 // 反序列化 让后端发送过来的字符串变成js里面的对象
  8.                 {#args = JSON.parse(args)#}
  9.                 console.log(typeof args)  // 返回的是object格式
  10.                 // 可以针对状态码做一个判断
  11.                 if (args.code == 200){
  12.                     $('#inp2').val(args.data.username)  // js里面的object取值就可以用点语法
  13.                 }else{
  14.                    alert(args.msg)
  15.                 }

AJAX发送json格式数据

需要将数据JSON.stringify()，contentType:'application/json'，序列化发送给后端。

sendjson.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>json数据</title>
  6.     {% load static %}
  7.  <link rel="stylesheet" type="text/css" href="{% static 'CSS/bootstrap.css' %}"/>
  8.     <script src="{% static 'JS/bootstrap.min.js' %}"></script>
  9.     <script src="{% static 'jQuery/jquery-3.6.0.min.js' %}"></script>
  10. </head>
  11. <body>
  12. <p>
  13.     <input type="text" id="inp1">
  14. </p>
  15. <button id="btn" class="btn btn-primary">发送</button>
  16. <input type="text" id="inp2">
  17. <script>
  18.     $('#btn').click(function (){
  19.         $.ajax({
  20.             url:'',
  21.             type:'post',
  22.             data:JSON.stringify({'inp1':$('#inp1').val()}),
  23.             contentType:'application/json',
  24.             success:function (res){
  25.                 $('#inp2').val(res)
  26.             }
  27.         })
  28.     })
  29. </script>
  30. </body>
  31. </html>
views.py
  1. def send_json(request):
  2. 	if request.is_ajax():
  3. 		bytes_data = request.body  # 接收到的是二进制数据
  4. 		str_data = bytes_data.decode('utf-8')
  5. 		print(str_data)  # 转换成str类型
  6. 		d = json.loads(str_data) # 转换成字典
  7.     print(type(d))  # <class 'dict'>
  8. 		return HttpResponse('get it')
  9.   return render(request, 'sendjson.html')

这里需要注意的是request.POST是没办法拿到json数据的，需要使用request.body进行接收，不过接收到的是二进制数据，如果想要进一步处理，需要将数据转成字符串。再反序列化成字典。

AJAX发送文件数据

Ajax上传文件数据需要借助于JS内置的FormData对象。

upload_file.py
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>上传文件</title>
  6.     {% load static %}
  7.     <link rel="stylesheet" href="{% static 'CSS/bootstrap.css' %}">
  8.     <script src="{% static 'jQuery/jquery-3.6.0.min.js' %}"></script>
  9. </head>
  10. <body>
  11.     <input type="text" id="inp1">
  12.     <input type="file" id="inp2">
  13.     <button class="btn-primary btn">上传</button>
  14.     <script>
  15.         $('.btn').click(
  16.             function (){
  17.                 // ajax上传文件需要借助内置的 FormData
  18.                 var FormDataObj = new FormData();
  19.                 // 1.添加普通数据
  20.                 FormDataObj.append('inp1', $('#inp1').val())
  21.                 // 2.添加文件数据
  22.                 FormDataObj.append('inp2', $('#inp2')[0].files[0])
  23.                 $.ajax({
  24.                     url:'',
  25.                     type:'post',
  26.                     data:FormDataObj, // Django会自动识别FormData对象的数据
  28.                     // 用FormData对象必须指定的参数
  29.                     contentType:false, // 不指定编码格式
  30.                     processData:false,  // 告诉浏览器不要再处理数据 原样发回来
  31.                     success:function (res){
  33.                     }
  34.                 })
  35.             }
  36.         )
  37.     </script>
  38. </body>
  39. </html>
views.py
  1. def upload_file(request):
  2.     if request.is_ajax():
  3.         print(request.POST)
  4.         print(request.FILES)
  5.     return render(request, 'upload_file.html')
  7.   # 输出结果
  8. # <QueryDict: {'inp1': ['11111']}>
  9. # <MultiValueDict: {'inp2': [<InMemoryUploadedFile: Snipaste_2021-08-13_15-15-54.png (image/png)>]}>

AJAX结合layer组件实现删除的二次确认

user_list.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>用户后台管理</title>
  6.     {% load static %}
  7.     <link rel="stylesheet" type="text/css" href="{% static 'CSS/bootstrap.css' %}"/>
  8.     <script src="{% static 'JS/bootstrap.min.js' %}"></script>
  9.     <script src="{% static 'jQuery/jquery-3.6.0.min.js' %}"></script>
  10.     <script src="{% static 'layer/layer.js' %}"></script>
  11. </head>
  12. <body>
  13.     <div class="container-fluid">
  14.         <div class="row">
  15.             <h1 class="text-center text-primary">用户后台管理</h1>
  16.     <table class="table table-responsive table-striped">
  17.         <thead>
  18.             <tr>
  19.                 <th>ID</th>
  20.                 <th>用户名</th>
  21.                 <th>密码</th>
  22.                 <th>注册时间</th>
  23.                 <th>最近登录</th>
  24.                 <th>是否锁定</th>
  25.                 <th>操作</th>
  26.             </tr>
  27.         </thead>
  28.         <tbody>
  29.             {% for obj in user_info %}
  30.                 <tr>
  31.                     <td>{{ obj.id }}</td>
  32.                     <td>{{ obj.username }}</td>
  33.                     <td>{{ obj.password }}</td>
  34.                     <td>{{ obj.date_regis }}</td>
  35.                     <td>{{ obj.last_login }}</td>
  36.                     <td>{{ obj.is_locked }}</td>
  37.                     <td>
  38. {#                        a标签是自带跳转的这里我们需要阻止跳转 给它绑定事件 #}
  39.                         <a href="javascript:;" class="btn btn-danger del" del_id="{{ obj.id }}" id="del_{{ obj.id }}">删除</a>
  40.                         <a href="" class="btn btn-primary">修改</a>
  41.                     </td>
  42.                 </tr>
  43.             {% endfor %}
  44.         </tbody>
  45.     </table>
  46.         </div>
  47.     </div>
  48.     <script>
  49.         $('.del').click(function (){
  50.             var id = $(this).attr('del_id')
  51.             label_del = $(this)  // 这时候的$(this)是a标签 赋值给label_del让后面能取到tr
  52.             //询问框
  53.             layer.confirm('确定删除？', {
  54.               btn: ['确定','取消'] //按钮
  55.             }, function(){
  56. // 点击确认执行确认函数
  57.                 $.ajax({
  58.                     url:'',
  59.                     type:'post',
  60.                     data:{'id':id},
  61.                     success:function (res){
  62.                         if (res.code==200){
  63.                             layer.msg(res.msg, {icon: 1})
  64.                             label_del.parent().parent().remove() // 直接在前端页面删除一行tr标签
  65.                         }else {
  66.                             layer.msg(res.msg, {icon: 1})
  67.                         }
  68.                     }
  69.                 })
  70.             });
  71.         })
  72.     </script>
  73. </body>
  74. </html>
views.py
  1. from app01 import models
  3. def user_list(request):
  4.   user_info = models.UserInfo.objects.all()
  5.   if request.is_ajax():
  6.     back_dic = {'code': 200, 'msg': '删除成功'}
  7. 	# 获取前端传来的del_id
  8.     del_id = request.POST.get('id')
  9.     models.UserInfo.objects.filter(pk=del_id).delete()
  10.     return JsonResponse(back_dic)
  11.   return render(request, 'user_list.html', locals())

Ajax 局部刷新 异步提交的更多相关文章

  1. ajax局部刷新

    //5秒刷新一次 $(function () { setInterval(Refresh, 5000); }); //ajax局部刷新 function Refresh() { $.ajax({ ty ...

  2. php Ajax 局部刷新

    php Ajax 局部刷新: HTML部分 </head> <body> <h1>Ajax动态显示时间</h1> <input type=&quo ...

  3. Ajax局部刷新（使用JS操作）

    对于在不使用Ajax的情况下,使用JS来进行局部刷新,主要有如下的几步: 1. 得到XMLHttpRequest 2. 使用open方法打开连接 3. 设置请求头信息 4. 注册onreadystat ...

  4. thickbox关闭子页后ajax局部刷新父页

    1. 首先注意需要调用thickbox的js <script type="text/javascript" src="<%=path%>/js/jque ...

  5. 实现AJAX局部刷新以及PageMethod方法的使用

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  6. Ajax.BeginForm的异步提交数据 简介

    Html.BeginForm与Ajax.BeginForm都是MVC架构中的表单元素,它们从字面上可以看到区别,即Html.BeginForm是普通的表单提交,而Ajax.BeginForm是支持异步 ...

  7. 原生js实现ajax的文件异步提交功能、图片预览功能.实例

    采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交 效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...

  8. 用户登录ajax局部刷新验证码

    用户登录的时候,登录页面附带验证码图片,用户需要输入正确的验证码才可以登录,验证码实现局部刷新操作. 效果如图: 代码如下: #生成验证码及图片的函数  newcode.py import rando ...

  9. JQUERY AJAX无刷新异步上传文件

    AJAX无刷新上传文件并显示 http://blog.csdn.net/gao3705512/article/details/9330637?utm_source=tuicool jQuery For ...

随机推荐

  1. Adaptive AUTOSAR 学习笔记 2 - 官方文档下载及阅读建议

    目前互联网上没有太多的 Adaptive AUTOSAR 的学习资料,官方文档是一个很不错的途径.看过官方文档才发现,目前很多关于 Adaptive AUTOSAR 的文章都是官方文档的简化翻译,不如 ...

  2. Java刷题常用API

    目录 输入输出 快速查看 最大最小值 string stringbuilder 集合 map queue stack set 优先队列 PriorityQueue (Heap) 数组 静态数组 动态数 ...

  3. XML技术

    XML是一种可扩展标记语言,用来标记数据.定义数据类型,1998年由W3W发布1.0.版本,与HTML语言相比,可以自定义可扩展标签格式,但是语法严格. XML可以用来存储数据,可移植性强,主要充当配 ...

  4. 海亮NOIP集训-每日总结

    [总结] xzh 2021暑假每日结 2021年7月12日 内容主题 DP,树型DP(讲解人:王修涵) 考场题目总结 T1: 考场简单想法: 算出两两点间距离,贪心,所用时间 \(1.5h\) 左右. ...

  5. uni-app中当uni.navigateTo传的参数为object时，通过传递的不同参数，在显示单页面内通过v-if判断显示出对应的内容（可实现多页面效果）

    通过uni-app中当uni.navigateTo传的参数为object时,通过传递的不同参数,在显示单页面内通过v-if判断显示出对应的内容(可实现多页面效果) 起始页跳转到对应页面,并传递参数(o ...

  6. 详解API Gateway流控实现，揭开ROMA平台高性能秒级流控的技术细节

    摘要:ROMA平台的核心系统ROMA Connect源自华为流程IT的集成平台,在华为内部有超过15年的企业业务集成经验. 本文分享自华为云社区<ROMA集成关键技术(1)-API流控技术详解& ...

  7. 如何掌握C#的核心技术

    如何掌握C#的核心技术 感谢网友毛大神制作的图. 引子 前不久看到一个段子,某年宁波交警引进人脸识别技术抓拍行人闯红灯,结果一天下来被发现闯红灯次数最多的是珠海女子董小姐,日闯红灯3000多次.宁波交 ...

  8. tomcat日志详解

    1 tomcat 日志详解 1.1 tomcat 日志配置文件 tomcat 对应日志的配置文件:tomcat目录下的/conf/logging.properties. tomcat 的日志等级有:日 ...

  9. 第二十五篇 -- QTreeWidget右击菜单的实现

    效果图: 自己画一个ui,如图,前面已经讲过怎么用Qt Designer画图了,现在就不赘述了. ui_play.py # -*- coding: utf-8 -*- # Form implement ...

  10. 九九乘法表（Java版）

    3.九九乘法表 //九九乘法表 public class MultiplicationTables { public static void main(String[] args){ for (int ...