9.django AJAX

AJAX准备知识：JSON

什么是 JSON ？

JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
JSON 是轻量级的文本数据交换格式
JSON 独立于语言 *
JSON 具有自我描述性，更易理解

* JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。

啥都别多说了，上图吧！

合格的json对象：

["one", "two", "three"]
{ "one": 1, "two": 2, "three": 3 }
{"names": ["张三", "李四"] }
[ { "name": "张三"}, {"name": "李四"} ]

不合格的json对象：

{ name: "张三", 'age': 32 }  // 属性名必须使用双引号
[32, 64, 128, 0xFFF] // 不能使用十六进制值
{ "name": "张三", "age": undefined }  // 不能使用undefined
{ "name": "张三",
  "birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
  "getName":  function() {return this.name;}  // 不能使用函数和日期对象
}

stringify与parse方法

JavaScript中关于JSON对象和字符串转换的两个方法：

JSON.parse(): 用于将一个 JSON 字符串转换为 JavaScript 对象　

JSON.parse('{"name":"Q1mi"}');
JSON.parse('{name:"Q1mi"}') ;   // 错误
JSON.parse('[18,undefined]') ;   // 错误

JSON.stringify(): 用于将 JavaScript 值转换为 JSON 字符串。　

JSON.stringify({"name":"Q1mi"})

和XML的比较

JSON 格式于2001年由 Douglas Crockford 提出，目的就是取代繁琐笨重的 XML 格式。

JSON 格式有两个显著的优点：书写简单，一目了然；符合 JavaScript 原生语法，可以由解释引擎直接处理，不用另外添加解析代码。所以，JSON迅速被接受，已经成为各大网站交换数据的标准格式，并被写入ECMAScript 5，成为标准的一部分。

AJAX简介

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    {% load static %}
    <script src="{% static 'jquery-3.3.1.js' %}"></script>
</head>
<body>
<input type="text" name="one" id="one">+
<input type="text" name="two" id="two">=
<input type="text" name="three" id="three">
<input type="button" value="ajax计算" id="cal">
<input type="button" value="ajax计算" id="cal">

<script>
    $("#cal").click(function () {
        alert("开始计算!");
        var textValueOne=$("#one").val();
        var textValueTwo=$("#two").val();

        $.ajax({
            url:"/ajax_add/",
            type:"GET",
            data:{"one":textValueOne,"two":textValueTwo},
            success:function (data) {
                $("#three").val(data);
            },
            error:function () {

            }
        });
    });
</script>
</body>
</html>

views.py

def index(request):
    return render(request, 'index.html')


def ajax_add(request):
    one = request.GET.get("one")
    two = request.GET.get("two")
    three = int(one) + int(two)
    return HttpResponse(three)

urls.py

urlpatterns = [
    path('admin/', admin.site.urls),
    path('index/', views.index),
    path('ajax_add/', views.ajax_add),
]

AJAX请求如何设置csrf_token(用于POST请求)

setupajax.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);
    }
  }
});

ajax请求参数解析

AJAX上传文件

XMLHttpRequest 是一个浏览器接口，通过它，我们可以使得 Javascript 进行 HTTP (S) 通信。XMLHttpRequest 在现在浏览器中是一种常用的前后台交互数据的方式。2008年 2 月，XMLHttpRequest Level 2 草案提出来了，相对于上一代，它有一些新的特性，其中 FormData 就是 XMLHttpRequest Level 2 新增的一个对象，利用它来提交表单、模拟表单提交，当然最大的优势就是可以上传二进制文件。下面就具体

首先看一下formData的基本用法：FormData对象，可以把所有表单元素的name与value组成一个queryString，提交到后台。只需要把 form 表单作为参数传入 FormData 构造函数即可：

介绍一下如何利用 FormData 来上传文件。

// 上传文件示例
$("#b3").click(function () {
  var formData = new FormData();
  formData.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val());
  formData.append("f1", $("#f1")[0].files[0]);
  $.ajax({
    url: "/upload/",
    type: "POST",
    processData: false,  // 告诉jQuery不要去处理发送的数据
    contentType: false,  // 告诉jQuery不要去设置Content-Type请求头
    data: formData,
    success:function (data) {
      console.log(data)
    }
  })
})

或者使用

var form = document.getElementById("form1");
var fd = new FormData(form);

这样也可以直接通过ajax 的 send() 方法将 fd 发送到后台。

注意：由于 FormData 是 XMLHttpRequest Level 2 新增的接口，现在低于IE10 的IE浏览器不支持 FormData。

练习（用户名是否已被注册）

功能介绍

在注册表单中，当用户填写了用户名后，把光标移开后，会自动向服务器发送异步请求。服务器返回这个用户名是否已经被注册过。

案例分析

页面中给出注册表单；
在username input标签中绑定onblur事件处理函数。
当input标签失去焦点后获取 username表单字段的值，向服务端发送AJAX请求；
django的视图函数中处理该请求，获取username值，判断该用户在数据库中是否被注册，如果被注册了就返回“该用户已被注册”，否则响应“该用户名可以注册”。

models.py

from django.db import models


class Person(models.Model):
    id = models.AutoField(primary_key=True)
    name = models.CharField(max_length=32)
    age = models.IntegerField()
    birthday = models.DateField(auto_now_add=True)

    def __str__(self):
        return self.name

url.py

urlpatterns = [
   
    path('logined/', views.logined),
    path('has_login/', views.has_login),

   
]

logined.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户名是否已被注册</title>
    {% load static %}
    <script src="{% static 'jquery-3.3.1.js' %}"></script>
</head>
<body>
<input type="text" id="name">
<span id="e1"></span>

<script>
    $("#name").blur(function () {
        alert("失去了焦点!");
        var name=$("#name").val();
        alert(name);

        $.ajax({
            url:"/has_login/",
            type:"GET",
            data:{"name":name},

            success:function (rev) {
                // 把span标签放到i1的后面
                $("#e1").text(rev).css("color","red");
            },
            error:function () {
                alert("error！");

            }
        })
    })
</script>


</body>
</html>

views.py

# 校验用户是否被注册页面
def logined(request):
    return render(request, "logined.html")


def has_login(request):
    name = request.GET.get("name")
    print(name)
    ret = models.Person.objects.filter(name=name)
    if ret:
        # 用户名已经存在
        msg = "用户名已经被注册"
    else:
        msg = "用户名可用"
    return HttpResponse(msg)

序列化

Django内置的serializers

def books_json(request):
    book_list = models.Book.objects.all()[0:10]
    from django.core import serializers
    ret = serializers.serialize("json", book_list)
    return HttpResponse(ret)

补充一个SweetAlert插件示例

1.去github下载下面两个文件,下载地址: https://github.com/lipis/bootstrap-sweetalert

　　sweetalert.css

　　sweetalert.min.js

models.py

from django.db import models


class Person(models.Model):
    id = models.AutoField(primary_key=True)
    name = models.CharField(max_length=32)
    age = models.IntegerField()
    birthday = models.DateField(auto_now_add=True)

    def __str__(self):
        return self.name

urls.py

urlpatterns = [

    path('sweetalert/', views.sweetalert),
    path('delete/', views.delete),
]

views.py

def sweetalert(request):
    personlist = models.Person.objects.all()
    print(personlist)
    return render(request, 'sweetalert.html', {"personlist": personlist})


# 根据id删除
def delete(request):
    if request.method == 'POST':
        id = request.POST.get("id")
        dep_obj = models.Person.objects.filter(id=id).delete()
        return HttpResponse("删除成功!")

sweetalert.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sweetalert</title>
    {% load static %}
    <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">
                <tr>
                    <th>序号</th>
                    <th>id</th>
                    <th>name</th>
                    <th>age</th>
                    <th>birthday</th>
                    <th>操作</th>
                </tr>

                {% for person in personlist %}
                    <tr>
                        <td>{{ forloop.counter }}</td>
                        <td>{{ person.id }}</td>
                        <td>{{ person.name }}</td>
                        <td>{{ person.age }}</td>
                        <td>{{ person.birthday|date:'Y-m-d' }}</td>
                        <td>
                            <button class="btn btn-danger del"><i class="fa fa-trash-o">删除</i></button>
                        </td>
                    </tr>

                {% endfor %}
            </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").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>

posted on 2018-11-20 17:23 wei_hu 阅读(117) 评论(0) 收藏举报

刷新页面返回顶部

导航

9.django AJAX

AJAX准备知识：JSON

什么是 JSON ？

stringify与parse方法

和XML的比较

AJAX简介

AJAX请求如何设置csrf_token(用于POST请求)

AJAX上传文件

练习（用户名是否已被注册）

功能介绍

案例分析

序列化

Django内置的serializers

补充一个SweetAlert插件示例