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项目中,我们编写的大部 ...

随机推荐

python logging的输出
---恢复内容开始--- python中logging的使用什么是日志: 日志是一种可以追踪某些软件运行时所发生事件的方法软件开发人员可以向他们的代码中调用日志记录相关的方法来表明发生了某些事情 ...
UML-基于GRASP对象设计步骤
在OO设计建模的时候,在最后考虑系统启动时需要初始化的内容. 1.从用例开始,以下是一步步设计用例实现处理销售 2.SSD 我们选择: makeNewSale 3.编写操作契约(复杂用例场景时) 4 ...
修改Oracle数据库的字符集
2019年6月,来到了新的环境工作,接触了新的项目. 新的项目需要用Oracle数据库,虽然以前没用过,但是边学边用呗,在安装Oracle数据库的时候完全没有注意到要选择UTF-8的字符集,直接就默认 ...
基于ssh开发彩票购买系统的设计与实现毕业设计
开发环境: Windows操作系统开发工具: MyEclipse+Jdk+Tomcat+MYSQL数据库运行效果图: 源码及原文地址:http://javadao.xyz/forum.php?mod ...
uni-app: 如何实现增量更新功能？
都知道,很多APP都有增量更新功能,Uni APP也是在今年初,推出了增量更新功能,今天我们就来学习一波. 当然,很多应用市场为了防止开发者不经市场审核许可,给用户提供违法内容,对增量更新大多持排斥态 ...
idea使用Maven创建的JavaWeb项目新建文件时没有打包到target目录报错
背景:在使用tomcat发布这个项目时,浏览网页,js没有效果. 问题:发现打包之后没有同步到target里解决办法:点击最右侧的Maven栏->所建项目->Lifecycle-> ...
c#学习笔记05——数组&集合
数组声明数组 .一维数组的定义: 数据类型[] 数组名=new 数据类型[大小]; eg: ]; ,,,,}; ]; .多维数组的定义 ,];//定义二维数组 ,,];//定义三维数组多维数组可以 ...
踏出第一步——安装并跑通python程序
一.首先学会安装python软件 1.在浏览器下输入安装python软件的官方网址. 点击打开链接 2.在界面上点击"Downloads"下的"Windows" ...
Graph & Trees3 - 二分图
\[二分图略解\] \[By\;TYQ\] 二分图定义: \(f(i,L) = [a \in L\;\text{&}\;\forall b \in a.to \;\text{,}\; b \n ...
CodeForces - 697B
这道题看见就觉得是道水题,想着随便写写就能A了,然后就开始上手直接模拟,然后就被数据打脸了. 后面就困了一个多小时,各种改,最后还是看了题解发现了scanf的多种用法. 题目大概意思就是说: 给一个 ...

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

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

随机推荐

热门专题