Ajax基本使用和JsonHttpResponse

Ajax : 异步请求，不会刷新页面，页面上用户之前输入的数据都不会丢失。

简单请求案例:

views页面

from django.shortcuts import render,HttpResponse,redirect
from django.urls import reverse
def login(request):
    if request.method == "POST":
        if request.POST.get("uname") == "root":
            return HttpResponse("ok")
        return HttpResponse("error")
    return render(request, "login.html")

def home(request):

    return render(request,"home.html")

HTML页面

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div>
    <label>
        用户名: <input type="text" name="username" id="username">
    </label>
    <label>
        密码: <input type="password" name="password" id="password">
    </label>
    <button id="btn">提交</button>
    <span style="color: red;font-size: 12px" id="err"></span>
</div>

</body>
<script src="{% static 'js/jquery.js' %}"></script>
<script>
    $('#btn').click(function (){
        var name = $('#username').val();
        var pwd = $('#password').val();
        console.log(name,pwd)
        $.ajax({
            url: {% url 'login' %}',
            type: 'post',
            data: {uname:name,upwd:pwd},
            success: function (res) {
                console.log(res, typeof res)
                if(res==="ok"){
                    location.href = '{% url 'home' %}';
                }
                else{$('#err').text("用户名或者密码错误")

                }
            }
        })

    })
</script>

</html>

注意点:

$.ajax({  //
  url:'/login_ajax/',  //写路径时，如果后台使用的是django框架，那么url路径的后面的斜杠要加上，如果想不加上斜杠，
那么需要在django的settings配置文件中加上 APPEND_SLASH = False，并且后台的urls.py文件中的路径要和ajax请求路径对应好，
该有斜杠写斜杠，不需要斜杠的，去掉斜杠
  type:'post',
  ...
}),

在js代码中使用url别名反向解析来写路径:

$.ajax({  //
  url:'{% url "login_ajax" %}',
  type:'post',
  ...
}),
但是，要注意一点，当这段js代码是写到某个js文件中，然后hmtl文件通过script标签的src属性来引入时,
{% url "login_ajax" %}语法就不能被模板渲染了，也就是失效了

响应字典数据类型

方式一: 手动利用json序列化和反序列化

views页面

from django.shortcuts import render,HttpResponse,redirect
from django.urls import reverse
from django.http import JsonResponse
def login(request):
    if request.method == "POST":
        if request.POST.get("uname") == "root":
            return HttpResponse("ok")
        return HttpResponse("error")
    return render(request, "login.html")

def home(request):
    return render(request,"home.html")

def data(request):
    import json
    dic = {"summer":["夏日惊喜","西瓜","哈密瓜","凉面"]}
    dic_str = json.dumps(dic,ensure_ascii=False)
    return HttpResponse(dic_str)

HTML页面

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>这是home页面</h1>
<button id="btn_home">点击有惊喜</button>
<ul>

</ul>
</body>
<script src="{% static 'js/jquery.js' %}"></script>
<script>
    $('#btn_home').click(function () {
        $.ajax({
            url: '{% url "data" %}',
            type: 'get',
            success: function (res) {
                console.log(res, typeof res) // 夏天 string  用HttpResponce传递字典数据, 只能取到字典的键
                // 引入json模块后得到字符串形式的字典: {"summer": ["西瓜", "哈密瓜", "凉面"]} string
                var dic_res = JSON.parse(res)
                console.log(dic_res,typeof dic_res)
                var ret = dic_res.summer
                // 将列表中的内容放到页面中
                for (var i=0;i<ret.length;i++){
                   var content = ret[i];
                    var liEle = document.createElement('li');
                    liEle.innerText = content
                    $('ul').append(liEle);

                }
            }
        })
    })
</script>

</html>


# 第一种方式，直接通过HttpResponse回复字典数据，那么ajax接受到数据之后，需要自行反序列化
# data_list_str = json.dumps(data_list, ensure_ascii=False)
# 直接使用HttpResponse回复字典类型数据，那么会将字典里面元素的键都拼接成一个字符串来响应，所以不是我们想要的结果，所以我们先将字典类型数据，转换成json字符串，在通过HttpResponse来进行响应

方式二: 手动加响应头键值对 ['content-type'] = 'application/json'

# data函数改写
def data(request):
    import json
    dic = {"summer":["夏日惊喜","西瓜","哈密瓜","凉面"]}
    dic_str = json.dumps(dic,ensure_ascii=False)
    ret = HttpResponse(dic_str)
    ret['content-type'] = 'application/json'
    return ret


# HTML接收和显示数据修改
success: function (res) {
                console.log(res, typeof res) // 夏天 string  用HttpResponce传递字典数据, 只能取到字典的键
                // 引入json模块后得到字符串形式的字典: {"summer": ["西瓜", "哈密瓜", "凉面"]} string
                {#var dic_res = JSON.parse(res)#}
                {#console.log(dic_res,typeof dic_res)#}
                var ret = res.summer
                // 将列表中的内容放到页面中
                for (var i=0;i<ret.length;i++){
                   var content = ret[i];
                    var liEle = document.createElement('li');
                    liEle.innerText = content
                    $('ul').append(liEle);


#第二种方式：通过HttpResponse回复字典数据，回复之前，加上一个响应头键值对，如下，那么ajax收到这个响应数据的时候，
会查看这个响应头，发现content-type这个响应头的值为application/json，那么会自动对响应数据进行反序列化，不需要我们自己手动反序列化了

方式三: 引入JsonHttpResponce

# data部分
from django.http import JsonResponse
def data(request):
    import json
    dic = {"summer":["夏日惊喜","西瓜","哈密瓜","凉面"]}
    # dic_str = json.dumps(dic,ensure_ascii=False)
    # ret = HttpResponse(dic_str)
    # ret['content-type'] = 'application/json'
    return JsonResponse(dic)
#JsonResponse：1 序列化数据   2 加上['content-type'] = 'application/json'这个响应头键值对

注意:

lst = ["夏日惊喜","西瓜","哈密瓜","凉面"]
    #当使用JsonResponse回复非字典类型数据时，需要将safe参数的值改为False, 不然会报错
    return JsonResponse(lst, safe=False)

局部更新数据案例:

views页面

def sub(request):
    if request.method == "GET":
        return render(request,"sub.html")
    else:
        import json
        print(request.body)
        data = request.body.decode()
        print(data)
        data = json.loads(data)
        print(data)
        a = int(data["a"])
        b = int(data["b"])
        ret = a+b
        print(ret)
        return HttpResponse(ret)

HTML页面

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<label>
    a: <input type="text" name="a" id="aid">
</label>
<label>
    b: <input type="text" name="b" id="bid">
</label>
<button id="btn_sub">查询</button>
<br>
a+b= <span id="sp" style="color: burlywood"></span>

</body>
<script src="{% static 'js/jquery.js' %}"></script>
<script>

    $('#btn_sub').click(function () {
        var a = $('#aid').val();
        var b = $('#bid').val();
        $.ajax({
            url: '{% url 'sub' %}',
            type: 'post',
            headers: {
                'Content-Type':'application/json',
            },
            data: JSON.stringify({a:a,b:b}),
            success: function (res) {
                {#alert(res);#}
                $('#sp').text(res)
            }
        })
    })
</script>
</html>

请求头消息格式分析

请求消息格式和请求方法没有关系, 和请求头键值对中的这一组键值对有关系

file说明    <!-- enctype="multipart/form-data"这个参数就是将本次请求的消息格式，也就是那个content-type的值改为multipart/form-data，
那么本次http请求，会将文件数据片段发送 -->

Content-Type: application/x-www-form-urlencoded;  //浏览器发送数据ajax或者form表单，默认的格式都是它
它表示请求携带的数据格式，application/x-www-form-urlencoded对应的数据格式是：a=1&b=2
'''
    socket 接收到我们请求数据，会分析一下Content-Type: application/x-www-form-urlencoded;这个请求头
    
    # 叫做解析器
    if Content-Type == 'application/x-www-form-urlencoded':
        data = 'a=1&b=2'
        l1 = data.split('&')  [a=1,b=2]
        for i in l1:
            k,v = i.split('=')  
        if 请求方法 == 'GET':
            request.GET[k] = v
    
    elif Content-Type == 'multipart-formdata':
        request.FILES     
    
    #django没有内置对appcation/json的消息格式的解析器，所以如果请求数据是json类型，那么我们需要自行解析
         
'''

ajax结合sweetalert删除数据案例:

views页面

class Del_book(View):
    def get(self,request,pk):
        try:
            models.Book.objects.get(id=pk).delete()
        except:
            return HttpResponse('没有这本书的信息',status=404)
        # return HttpResponse('error') #默认响应的状态码都是200
        return HttpResponse('ok')

HTML页面

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'bootstrap-sweetalert-master/dist/sweetalert.css' %}">
</head>
<body>
<div class="container">
    <h1>书籍展示</h1>
    <div class="row">
        <div class="clo-md-8 col-md-offset-2">
            <a href="{% url 'add_book' %}" class="btn btn-primary" style="margin-bottom: 10px">添加书籍</a>
            <table class="table table-bordered table-hover table-striped">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>书名</th>
                    <th>价格</th>
                    <th>出版日期</th>
                    <th>出版社</th>
                    <th>作者</th>
                    <th>操作</th>
                </tr>
                </thead>

                <tbody>
                {% for each_book in book_obj %}
                    <tr>
                        <td>{{ forloop.counter }}</td>
                        <td>{{ each_book.title }}</td>
                        <td>{{ each_book.price }}</td>
                        <td>{{ each_book.pub_date|date:'Y-m-d' }}</td>
                        <td>{{ each_book.pud.name }}</td>
                        <td>{{ each_book.author_name }}</td>
                        <td>
                            <a href="{% url 'update_book' each_book.id %}" class="btn btn-warning">编辑</a>
                            <span class="id_num hidden">{{ each_book.id }}</span>
                            <button class="btn btn-danger">删除</button>
                        </td>
                    </tr>
                {% endfor %}

                </tbody>
            </table>
        </div>
    </div>
</div>


</body>
<script src="{% static 'js/jquery.js' %}"></script>
<script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
<script src="{% static 'bootstrap-sweetalert-master/dist/sweetalert.min.js' %}"></script>

<script>

    $(".btn-danger").on("click", function () {
        var delete_id = $(this).prev().text()
        var ths = $(this)  //因为下面的函数中this指向的不是我们的标签按钮，所以通过一个变量来保存一下这个$(this)，方便后面使用
        swal({
                title: "are you sure?",
                text: "要谨慎！",
                type: "warning",
                showCancelButton: true,
                confirmButtonClass: "btn-danger",
                confirmButtonText: "确定删除",
                cancelButtonText: "容我三思",
                closeOnConfirm: false
            },
            (function () {
                $.ajax({
                    url: '/del_book/' + delete_id + '/',
                    type: 'get',
                    success: function (res) {
                        //当状态码为2xx或者3xx时才认为是请求正常成功了，会触发success对应的函数。但是当状态为4xx、5xx的时候，ajax认为此次请求是失败的会触发error属性对应的函数
                        if (res === "ok") {
                            swal("删除成功!", "success");  //关闭弹框
                            ths.parents('tr').remove()  //删除页面上对应的数据
                        }

                    },
                    error: function (res) {
                        if (res.status === 404) {
                            console.log(res.responseText)
                            //res.responseText是后台响应回来的错误信息
                            swal("删除失败!", res.responseText, "error")
                        }
                    }
                })

            }));
    })
</script>

箭头函数:

普通函数：var k = function(参数){return 'kkkk'};
箭头函数：var k = (参数) =>{return 'kkkk'};
箭头函数简写: var k = (参数)=>'kkkk'

js函数中this的指向问题

var a = 'xx';
var d1 = {
  a:'ss',
  f: () => {
    //this指向函数调用者
    // console.log(this);
    console.log(this.a);
  }
}
d1.f()  #调用者是d1对象，所以打印的内容为ss

# 函数的单体模式
var a = 'xx';
var d1 = {
  a:'ss',
  f(){
    console.log(this.a);  //结果为：ss
  },
}
d1.f()  

# 箭头函数，改变this的指向，将this指向上下文的this
var a = 'xx';
var d1 = {
  a:'ss',
  f:()=>{
    
            console.log(this); // 指向了Window对象
        console.log(this.a);  //结果为xx
    
    f1()
  },
}
d1.f() 


//
var a = 'xx';
var d1 = {
  a:'ss',
  f:function(){
        console.log(this.a); // ss
      function f1(){
        console.log(this); // 指向了Window对象
        console.log(this.a);  //结果为xx
      }
      f1() 
  },
}
d1.f() 

//箭头函数改变this指向
var a = 'xx';
var d1 = {
  a:'ss',
  f:function(){
        console.log(this.a); // ss
      var f1 = ()=>{
        console.log(this); // 指向了d1对象
        console.log(this.a);  //结果为ss
      }
      f1() 
  },
}
d1.f() 

//箭头函数改变this指向
var a = 'xx';
var d1 = {
  a:'ss',
  f:()=>{
        console.log(this.a); // xx
      var f1 = ()=>{
        console.log(this); // 指向了window对象
        console.log(this.a);  //结果为xx
      }
      f1() 
  },
}
d1.f()
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/fdsimin/p/13368349.html