django与Ajax

最新推荐文章于 2022-12-06 16:02:12 发布

意大利面拌42号混凝土

最新推荐文章于 2022-12-06 16:02:12 发布

阅读量171

点赞数

分类专栏： python 文章标签： ajax django javascript

本文链接：https://blog.csdn.net/prigilm/article/details/121127485

版权

python 专栏收录该内容

56 篇文章 3 订阅

订阅专栏

Python之django与Ajax

文章目录

- Python之django与Ajax

一、准备知识、JSON

1、什么是JSON

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

# 简单一句JSON是各种编程语言相互交互的数据格式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PnfxqSXa-1635934800241)(C:\Users\pilgirm\AppData\Roaming\Typora\typora-user-images\image-20210817153744225.png)]

2、stringify与parse方法

JSON只认识双引号的字符串格式

// JSON.parse(): 用于将一个 JSON 字符串转换为 JavaScript 对象(json只认双引的字符串格式)
JSON.parse('{"name":"Howker"}');
JSON.parse('{name:"Stack"}') ;   // 错误
JSON.parse('[18,undefined]') ;   // 错误

// JSON.stringify(): 用于将 JavaScript 值转换为 JSON 字符串。
JSON.stringify({"name":"Tonny"})

二、Ajax简介

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

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

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

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

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

"""
异步提交
局部刷新
"""

示例

home.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.min.js"></script>
</head>
<body>
<input type="text" id="d1"> +
<input type="text" id="d2"> =
<input type="text" id="d3">
<p>
    <button id="d4" class="btn btn-success">提交</button>
</p>
<script>
    // 先给按钮一个绑定事件
    $('#d4').click(function () {

        $.ajax({
            // 1.指定朝哪个后端发送ajax请求
            url:'', // 不写默认朝当前地址提交
            // 2.请求方式
            type:'post', // 不指定默认就是get 全是小写
            // 3.数据
            {#data:{'username':'egon','age':18},#}
            data:{'i1':$('#d1').val(),'i2':$('#d2').val()},
            // 4.回调函数（异步回调机制）:当后端返回结果的时候会自动触发，args接受后端返回的结果
            success:function (args) {
                {#alert(args)#}
                console.log(typeof args) // object对象
                $('#d3').val(args)
            }
        })
    }) 
</script>
</body>
</html>

views.py

from django.shortcuts import render
from django.http import JsonResponse

# Create your views here.

def home(request):
    if request.method == 'POST':
        print(request.POST) # <QueryDict: {'username': ['egon'], 'age': ['18']}>
        a = request.POST.get('i1')
        b = request.POST.get('i2')
        c = int(a)+int(b)
        return JsonResponse(c,safe=False)
    return render(request,'home.html')
"""
针对后端如果是用HttpResponse返回的数据  回调函数不会自动帮你反序列化
如果后端直接用的是JsonResponse返回的数据  回调函数会自动帮你反序列化

HttpResponse解决方式
	1、自己在前端利用JSON.parse（）进行反序列化
	2、在ajax里面配置一个参数dataType：true
"""

三、前后端传输数据的编码格式（contentType）

# post请求数据的编码格式
"""
get请求数据是直接放在url后面的
url?username=egon&age=12
"""
# 朝后端发送post请求的方式
"""
1、form表单
2、ajax请求
"""

"""
前后端传输数据的三种格式
urlencoded
formdata
json
"""

# form表单
	默认的数据编码格式是urlencoded（可以在request headers中找到content-type）
	django后端针对符合urlencoded编码格式的数据都会自动帮你解析封装到request.POST中
    
如果把编码格式改成formdata，那么针对普通的键值对还是剖析到request.POST中而将文件解析到request.FILES中

form表单不能发送json数据的


# ajax请求
	默认编码格式也是urlencoded
    数据格式：uname=16600000016&pword=123
    django后端针对符合urlencoded编码格式的数据都会自动帮你解析封装到request.POST中

四、Ajax发送文件数据

<p>
   username:<input type="text" id="id_username" class="form-control">
</p>

<p>
    password:<input type="text" id="id_password" class="form-control">
</p>

<p>
    <input type="file" id="id_file" >
</p>

{#<button id="id_button" class="btn btn-success">提交</button>#}
<input type="submit" id="id_button" class="btn btn-success">
<script>
    // 给button提交按钮绑定个事件
    $('#id_button').click(function () {
        // 需要先利用FormData内置对象
        let formDataObj = new FormData();

        {#formDataobj.append(d1)#}
        // 2 添加普通键值对
        formDataObj.append('username',$('#id_username').val());
        formDataObj.append('password',$('#id_password').val());
        // 3 添加文件对象
        formDataObj.append('file',$('#id_file')[0].files[0]);
        console.log(formDataObj)
        // 4 将ajax数据发送给后端
        $.ajax({
            url:'',
            type:'post',
            data:formDataObj,

            // ajax发送文件必须要指定的两个参数
            contentType:false,  // 不需使用任何编码 django后端能够自动识别formdata对象
            processData:false,  // 告诉浏览器不要对数据进行任何处理

            success:function (args) {
                alert(args)
            }
        })
    })
</script>
        
# ajax发送文件格式数据
def json_ajax(request):
    if request.is_ajax():
        if request.method == 'POST':
            print(request.POST)
            print(request.FILES)
    return render(request,'json_ajax.html')
"""
Ajax发送文件总结：
	1、需要利用内置对象FormData
		let formDataObj = new FormData();
	2、需要指定两个关键字的参数
		contentType:false,  // 不需使用任何编码 django后端能够自动识别formdata对象
     	processData:false,  // 告诉浏览器不要对数据进行任何处理
     3、django后端能够直接识别FormData对象并且能够将内部的普通用键值对自动解析并封装到request.POST中，文件数据会自动解析并封装到request.FILES中
"""

五、Ajax发送json数据

$.ajax({
            // 1. 指定数据提交的路径
            url: '/index/',

            // 2. 指定提交方式
            type: 'post',

            // 3. 传入的数据
            {#data: {'d1': d1, 'd2': d2},#}
            data: JSON.stringify({'d1': d1, 'd2': d2}),
            contentType:'application/json', // 指定编码格式
                )}

六、ajax实现弹出框的二次确认

userlist.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    {% load static%}
    <script src="{% static 'layer-v3.5.1/layer/layer.js' %}"></script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
         <table class="table table-hover table-striped">
            <div class="form-control">
                <div class="row">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>姓名</th>
                            <th>密码</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                <tbody>
                    {% for foo in userall %}
                   <tr>
                    <th>{{ foo.id }}</th>
                    <th>{{ foo.name }}</th>
                    <th>{{ foo.pwd }}</th>
                    <th>
                        <a href="javascript:;" class="btn btn-danger del" del_id=" {{ foo.id }}"  id="del_{{ foo.id }}">删除</a>
                    </th>
                    </tr>
                    {% endfor %}
                </tbody>
                </div>
            </div>
        </table>
    </div>
</div>
    <script>
        // 绑定弹出按钮
        $('.del').click(function () {
            var id = $(this).attr('del_id')
            var count = $(this)
            //询问框
            layer.confirm('是否确定删除', {
                btn: ['删除', '取消'] //按钮
            }, function () {
                $.ajax({
                    url: '',
                    type: 'post',
                    data: {'id': id},
                    success: function (args) {
                        if (args.code == 200) {
                                layer.msg(args.msg, {icon: 1},function () {
                                    location.reload()
                                })
                             }
                        }
                    })

                })
            })

    </script>
</body>
</html>

views.py

# ajax实现弹出框的二次确认
def userlist(request):
    userall = models.User.objects.all()
    if request.is_ajax():
        if request.method == 'POST':
            dict_code = {'code':200,'msg':'删除成功'}
            del_id=request.POST.get('id')
            int_del_id = int(del_id)
            models.User.objects.filter(pk=int_del_id).delete()
            return JsonResponse(dict_code)
    return render(request, 'userlist.html', locals())

意大利面拌42号混凝土

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
django与Ajax

Python之django与Ajax文章目录Python之django与Ajax一、准备知识、JSON1、什么是JSON2、stringify与parse方法二、Ajax简介三、前后端传输数据的编码格式（contentType）四、Ajax发送文件数据五、Ajax发送json数据六、ajax实现弹出框的二次确认一、准备知识、JSON1、什么是JSONJSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）JSON 是轻量级的文本数据交换格式JS
复制链接

扫一扫