django框架进阶-AJAX-长期维护
2023-09-14 08:59:04 时间
################## 预备知识---json #######################
预备知识,json
什么是json?这是一种数据格式,和语言没有关系,
为什么会有json这种数据格式,就是为了可以实现跨语言的传输,比如前后端的传输,前端是js,后端可以是c,go,python,java,php,等等,
不同的后端语言怎么和前端语言做交互呢?
现在企业基本都是前后端分离的,前端需要什么数据,你就返回什么数据,就可以了,前端框架Vue,后端就是写API,只写API也挺麻烦的,也不简单,
json的出现就是为了替代xml的,json更加的简洁清晰,
################## AJAX的基本认识 #######################
我们学过的发请求的方式: 1,直接在浏览器输入网址,回车,这是一个get请求, 2,a标签,get请求 3,form表单,post请求,和get请求都可以发, 4,AJAX,也可以发get请求,也可以发post请求, 四种都是不依赖的,独立的,
ajax的认识:
AJAX的基本认识 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步的Javascript和XML”。 ajax没有什么复杂的,就是js发请求的一种方式而已。 这是为了使用js传输xml到服务器而产生的技术,现在基本都是使用AJAX传递json数据格式了,是原生js的一门技术,但是我们写的时候不使用原生的js,非常麻烦,所以我们使用jQuery ###################### AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求; 同步就是要排队,需要等,使用AJAX就解决了这个问题 异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求。异步就是可以一起走,不能等 ##################################### AJAX特点: 1,异步,就是不用等了,最重要的特点, 2,局部刷新浏览器,(偷偷发请求了,) 比如注册的时候,输入已经存在的用户名,点击注册,会提示该用户名已经注册,但是页面是没有刷新的, 但是怎么知道该用户已经注册的,就是往数据库去校验了,这就是局部刷新, ############################### AJAX常用的场景: 1,注册页面, 输入用户名,点击注册,会偷偷的使用AJAX发送请求, 输入用户名,失去光标,会偷偷的使用AJAX发送请求, 2,编辑页面,可以编辑之后马上就把新数据填充进来,
################## AJAX #######################
视图:
from django.shortcuts import render, HttpResponse # Create your views here. def index(request): return render(request, "index.html") def ajax_add(request): print(request.GET) print(request.GET.get("i1")) print(request.GET.get("i2")) i1 = int(request.GET.get("i1")) i2 = int(request.GET.get("i2")) ret = i1 + i2 return HttpResponse(ret) def ajax_add3(request): print(request.POST) print("-" * 120) i1 = int(request.POST.get("i1")) i2 = int(request.POST.get("i2")) ret = i1 + i2 return HttpResponse(ret) def test(request): # import time # time.sleep(5) url = "http://p7.yokacdn.com/pic/YOKA_HZP/2018-01-19/U10089P42TS1516351813_11903.jpg" # return HttpResponse(url) # return render(request, "index.html") return HttpResponse("http://www.luffycity.com") from app01 import models # 序列化的问题, def persons(request): ret = models.Person.objects.all() # person_list = [] # for i in ret: # person_list.append({"name": i.name, "age": i.age}) # print(person_list) # import json # s = json.dumps(person_list) # print(s) # 我们不使用这种麻烦的方法进行序列化,django给我们想好了, # from django.core import serializers # s = serializers.serialize("json", ret) # print(s) # return HttpResponse(s) return render(request, "sweetalert_demo.html", {"persons": ret}) def delete(request): import time time.sleep(3) del_id = request.POST.get("id") models.Person.objects.filter(id=del_id).delete() return HttpResponse("删除成功!")
ajax测试的页面:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>AJAX局部刷新实例</title> </head> <body> <input type="text" id="i1">+ <input type="text" id="i2">= <input type="text" id="i3"> <input type="button" value="AJAX提交" id="b1"> <input type="button" value="AJAX提交3" id="b3"> <input type="button" value="呵呵哒" id="b2"> <form action="/form_add/" method="post"> {# 本质这个{% csrf_token %}也是一个input框, #} {% csrf_token %} <input type="text" name="user"> <input type="password" name="pwd"> <input type="submit"> </form> <script src="/static/jquery-3.3.1.js"></script> <script src="/static/setupajax.js"></script> {#导入了这个文件,就不需要在发送ajax请求的时候,再传递 csrftoken 了,这个文件会把csrftoken以一种方式塞到请求头里面,#} <script> //使用get请求, $("#b1").on("click", function () { // 点击 id是b1的按钮要做的事儿 var i1 = $("#i1").val(); var i2 = $("#i2").val(); // 往后端发数据 $.ajax({ url: "/ajax_add/", type: "get", data: {"i1": i1, "i2": i2}, //这个函数用来接收请求 success: function (arg) { {#alert(arg);#} // 把返回的结果填充到 id是i3的input框中 $("#i3").val(arg); } }) }); //使用post请求,使用post请求也是要校验csrftoken的 $("#b3").on("click", function () { // 点击 id是b1的按钮要做的事儿 var i1 = $("#i1").val(); var i2 = $("#i2").val(); // 找到页面上csrf_token // var csrfToken = $("[name='csrfmiddlewaretoken']").val(); //使用这种方法,获取到csrftoken, // 往后端发数据 $.ajax({ url: "/ajax_add3/", type: "post", data: {"i1": i1, "i2": i2}, success: function (arg) { {#alert(arg);#} // 把返回的结果填充到 id是i3的input框中 $("#i3").val(arg); } }) }); // 复习jQuery $("#b2").on("click", function () { $.ajax({ url: "/test/", type: "get", success:function (a) { location.href = a; //这是跳转到另外一个页面, // alert(a); //如果你返回的是一个页面,这个弹框中就是html // 在页面上创建一个标签 //var imgEle = document.createElement("img"); //imgEle.src = a; // 把创建的img标签添加到文档中 //$("#b2").after(imgEle); } }) }) </script> </body> </html>
sweetalert测试的页面:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>sweetalert_demo</title> <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css"> <link rel="stylesheet" href="/static/sweetalert/sweetalert.css"> <style> .sweet-alert>h2 { padding-top: 15px; } </style> </head> <body> <div class="container"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">person管理</h3> </div> <div class="panel-body"> <table class="table table-bordered"> <thead> <tr> <th>序号</th> <th>id</th> <th>name</th> <th>age</th> <th>生日</th> <th>操作</th> </tr> </thead> <tbody> {% for p in persons %} <tr> <td>{{ forloop.counter }}</td> <td>{{ p.id }}</td> <td>{{ p.name }}</td> <td>{{ p.age }}</td> <td>{{ p.birthday|date:'Y-m-d' }}</td> <td> <button class="btn btn-danger del"><i class="fa fa-trash-o">删除</i></button> </td> </tr> {% endfor %} </tbody> </table> </div> </div> </div> <script src="/static/jquery-3.3.1.js"></script> <script src="/static/bootstrap/js/bootstrap.min.js"></script> <script src="/static/sweetalert/sweetalert.min.js"></script> <script src="/static/setupajax.js"></script> <script> // 找到删除按钮绑定事件 $(".del").on("click", function () { var $trEle = $(this).parent().parent(); var delId = $trEle.children().eq(1).text(); swal({ title: "你确定要删除吗?", text: "一旦删除就找不回来了", type: "warning", showCancelButton: true, confirmButtonClass: "btn-warning", confirmButtonText: "确认", cancelButtonText: "取消", closeOnConfirm: false, showLoaderOnConfirm: true }, function(){ // 向后端发送删除的请求 $.ajax({ url: "/delete/", type: "post", data: {"id":delId}, success:function (arg) { swal(arg, "你可以跑路了!", "success"); $trEle.remove(); } }); }); }) </script> </body> </html>
ajax发送post请求,需要加上csrftoken,我们可以把这个放入请求头中,需要加一个js文件,
function getCookie(name) { var cookieValue = null; if (document.cookie && document.cookie !== '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = jQuery.trim(cookies[i]); // Does this cookie string begin with the name we want? if (cookie.substring(0, name.length + 1) === (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } var csrftoken = getCookie('csrftoken'); function csrfSafeMethod(method) { // these HTTP methods do not require CSRF protection return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); } $.ajaxSetup({ beforeSend: function (xhr, settings) { if (!csrfSafeMethod(settings.type) && !this.crossDomain) { xhr.setRequestHeader("X-CSRFToken", csrftoken); } } });
url文件;
from django.conf.urls import url from django.contrib import admin from app01 import views urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^index/$', views.index), url(r'^ajax_add/$', views.ajax_add), url(r'^ajax_add3/$', views.ajax_add3), url(r'^test/$', views.test), url(r'^persons/$', views.persons), url(r'^delete/$', views.delete), ]
model文件;
from django.db import models # Create your models here. class Person(models.Model): name = models.CharField(max_length=16) age = models.IntegerField() birthday = models.DateField(auto_now_add=True) def __str__(self): return self.name
################# AJAX #######################
################## AJAX #######################
相关文章
- Django 使用django-celery-beat实现动态添加周期性任务
- Django分页(二)
- Django_ajax
- Jquery各Ajax函数:$.get(),$.post(),$.ajax(),$.getJSON()
- [Django] Auth django app with rest api
- Django管理工具django-admin.py创建项目
- Django中重建数据库表
- django框架进阶-分页-长期维护
- Django 模型
- Django管理工具django-admin.py创建项目
- Python Django后台管理模板美化:使用django-simpleui模块
- Django 3.2.5博客开发教程:体验django模板
- pythonanywhere使用:进入虚拟机及修改django项目的css样式
- Django 之 admin组件使用&源码解析
- Django学习18 -- 富文本编辑器(Rich Edit)
- Django 数据库操作进阶F和Q操作
- Django中的事务(Transaction)管理
- Django(1)-简介
- Django上传头像中具体问题的解决方案
- Django Ajax 实现Web命令行执行
- 16 - vulhub - Django JSONField/HStoreField SQL注入漏洞(CVE-2019-14234)