################## 预备知识---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 #######################