django框架进阶-AJAX-长期维护

################## 预备知识---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框架进阶-AJAX-长期维护的更多相关文章

django框架进阶-中间件-长期维护
################## 为什么使用中间件? ####################### 先说几个需求, 1,url的白名单,url=[ "XX"] ...
django框架进阶-分页-长期维护
################## 分页 ####################### 分页, django有自己内置的分页,但是功能不是很强大,所以自己写一个分页, web页面数据非常 ...
django框架进阶-admin-长期维护
############### django--admin的使用 ################ # django后台管理: # 第一步: # 在settings文件中修改语言和时区 L ...
Django框架之 Ajax
Django框架之 Ajax 浏览目录 AJAX准备知识 AJAX与XML的比较 AJAX简介 jQuery实现的ajax AJAX参数 AJAX请求如何设置csrf_token 序列化一.AJA ...
Django框架09 /ajax、crsf、settings导入
Django框架09 /ajax.crsf.settings导入目录 Django框架09 /ajax.crsf.settings导入 1. ajax概述 2. ajax应用 3. ajax上传文件 ...
Django框架之Ajax和form组件
一.Django框架之查漏补缺 1)models,字段概况 name = models.CharField(max_length=) age = models.IntegerField() price ...
django框架进阶-auth认证系统-长期维护
################## django的认证系统 ####################### 我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要 ...
django框架进阶-使用缓存-长期维护
############### django-缓存页面 ############### ########################################### # 全站缓存, ...
django框架进阶-ModelForm组件-长期维护
############################################################ """ 通常在Django项目中,我们编写的大部 ...

随机推荐

ZJNU 2349 - 抽抽抽
为4的倍数,列出所有可能情况再判断即可处理输入的数据对4取模可得 4444 2244 2222 1111 3333 1133 1223 1344 1124 3324 共十种情况所以得出答案 #i ...
37. docker swarm docker service 的更新
在service 运行的情况下进行更新 1. 创建名为 demo 的 overlay 网络 docker network create -d overlay demo 2. 创建 python-f ...
拉格朗日乘子（Lagrange multify）和KKT条件
拉格朗日乘子(Lagrange multify)和KKT条件无约束问题无约束问题定义如下: f(x)称为目标函数, 其中x是一个向量,它的维度是任意的. 通过求导, 令导数等于零即可: 如下图所示 ...
block内存篇
本文目的:对Block内存问题更加了解概念理解:一种数据类型或比较特殊的对象,相当于一个指向函数的指针,该指针指向一段封装代码,调用block块代码好比调用该指针指向的函数代码 block分类: N ...
springCloud eureka服务治理集群增加安全认证
做为SpringCloud Netflix服务套件中的一部分,springCloud eureka基于Netflix Eureka做了二次封装,默认提供WEB管理页面及服务治理. 为了确保在生产环境中 ...
aop 实现原理
aop 底层采用代理机制实现接口 + 实现类 :spring 采用 jdk 的动态代理只有实现类:spring 采用 cglib 字节码增强 aop专业术语 1.target(目标) 需要被代理 ...
并发与高并发（三）-CPU多级缓存の乱序执行优化
一.CPU多级缓存-乱序执行优化处理器或编译器为提高运算速度而做出违背代码原有顺序的优化. 重排序遵循原则as-if-serial as-if-serial语义:不管怎么重排序(编译器和处理器为了提 ...
游程编码run length code
今天突然看到一个名词,游程编码.也叫行程编码. 简单理解就是,几个相同连续的字符,然后用数字统计表示. 举个例子: aaaabbbccc 用游程编码的表示就是4a3b3c 如果:连续字符只有一个那么 ...
UI Automation编程辅助工具Inspect的下载和使用
UIAutomation微软提供的UI自动化库,主要用AutomationElement类来表示UI 自动化目录树中的一个UI自动化元素,.NET Windows的窗体应用程序和WPF应用程序. In ...
git的基础使用
GIT """ 什么是git:版本控制器 - 控制的对象是开发的项目代码代码开发时间轴:需求1 > 版本库1 > 需求2 > 版本库2 > 版本 ...

django框架进阶-AJAX-长期维护

django框架进阶-AJAX-长期维护的更多相关文章

随机推荐

热门专题