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

随机推荐

CYPHER 语句(Neo4j)
CYPHER 语句(Neo4j) 创建电影关系图新增查找修改删除导入格式转换创建电影关系图 CREATE (TheMatrix:Movie {title:'The Matrix', re ...
Python—程序设计：观察者模式
观察者模式内容:定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时, 所有依赖于它的对象都得到通知并被自动更新.观察者模式又称“发布-订阅”模式. 角色: 抽象主题(Subject) 具体 ...
caffe-fasterrcnn程序理解
faster-rcnn 结构杂谈参考博客:::https://www.cnblogs.com/longriyao/p/5832274.html http://www.cnblogs.com/cha ...
JavaSE--for each
参考:http://blog.csdn.net/yasi_xi/article/details/25482173 学习多线程的时候实例化线程数组而挖掘出来的一直以来的理解误区之前一直以为for ea ...
洛谷 P2320 [HNOI2006]鬼谷子的钱袋
题目传送门解题思路: 对于每一个数i,我们都可以用i/2来表示,而对于i/2我们可以用i/4表示......(以此类推) 举个例子,对于10,我们可以用5 + 5来表示,而5可以用 3 + 2表示, ...
吴裕雄--天生自然 JAVA开发学习：循环结构
public class Test { public static void main(String args[]) { int x = 10; while( x < 20 ) { System ...
Evaluation metrics for classification
Accuracy/Error rate ACC = (TP+TN)/(P+N) ERR = (FP+FN)/(P+N) = 1-ACC Confusion matrix Precision/Recal ...
支付宝H5支付demo
支付宝H5支付首先我们必须注册一个支付宝应用(本案例就直接用支付宝的沙箱环境,这个沙箱也就是支付宝提供给开发者的一个测试环境) 登录地址:https://open.alipay.com/platfo ...
drf三大认证补充
频率认证源码分析部分 def check_throttles(self, request): for throttle in self.get_throttles(): if not throttl ...
uniapp结合小程序第三方插件“WechatSI”实现语音识别功能，进而实现终端控制
最近在用soket实现终端控制器的功能,然后就想用语音控制,这样显得更AI WechatSI在manifest.json中配置: 在vue中插入如下展示代码: <view class=" ...

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

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

随机推荐

热门专题