Python进阶30-Django AJAX

2022-09-26 12:43:51 浏览数 (1)
  • 什么是AJAX？
  • 创建项目
  • AJAX上传文件
  • AJAX 提交 Json数据
  • serializers

-曾老湿, 江湖人称曾老大。

-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机，连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。

什么是AJAX？

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

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

具体请看链接

https://blog.driverzeng.com/zenglaoshi/4507.html

创建项目

基本操作

代码语言：javascript复制
from django.shortcuts import render,HttpResponse,redirect

# Create your views here.

def index(request):
    if request.method == 'GET':
        print(request.body)
        print(request.GET)
        print(request.POST)
        return render(request,'index.html')
    else:
        print(request.body)
        print(request.GET)
        print(request.POST)
        return HttpResponse('ok')
代码语言：javascript复制
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^$', views.index),
]

前端写测试页面

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<button class="btn">点我朝后台发数据</button>
<script>
    {# 取按钮 #}
    $('.btn').click(function () {
        alert('点我干啥？')
    })
</script>
</body>
</html>





Jquery AJAX发送get请求

使用get发请求到后台

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<button class="btn">点我朝后台发数据</button>
<script>
    {# 取按钮 #}
    $('.btn').click(function () {
        {#alert('点我干啥？')#}
        $.ajax({
            {#向后台发送请求的地址#}
            url:'/?name=zls',
            {# 以什么方式发请求 #}
            type:'get'
        })
    })
</script>
</body>
</html>



Jquery AJAX发送post请求

代码语言：javascript复制
from django.shortcuts import render,HttpResponse,redirect
import time
# Create your views here.

def index(request):
    if request.method == 'GET':
        print(request.body)
        print(request.GET)
        print(request.POST)
        return render(request,'index.html')
    else:
        time.sleep(5)
        print(request.body)
        print(request.GET)
        print(request.POST)
        return HttpResponse('ok')
代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<button class="btn">点我朝后台发数据</button>
<script>
    {# 取按钮 #}
    $('.btn').click(function () {
        $.ajax({
            url: '/',
            type: 'post',
            {#  data是网后台提交的数据  #}
            data:{'name':'zls','age':18},
            {# 成功的时候回调函数 #}
            success:function (data) {
                alert(data)
            }
        })
    })
</script>
</body>
</html>





写一个add功能

代码语言：javascript复制
from django.shortcuts import render, HttpResponse, redirect
import time


# Create your views here.

def index(request):
    if request.method == 'GET':
        print(request.body)
        print(request.GET)
        print(request.POST)
        return render(request, 'index.html')
    else:
        time.sleep(5)
        print(request.body)
        print(request.GET)
        print(request.POST)
        return HttpResponse('ok')


def add(request):
    if request.method == 'GET':
        return render(request, 'add.html')
    else:
        add1 = request.POST.get('add1')
        add2 = request.POST.get('add2')
        sum = int(add1)   int(add2)
        return HttpResponse(str(sum))
代码语言：javascript复制
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^$', views.index),
    url(r'^add/$', views.add),
]
代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>求和</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <p>
        <input type="text" name="add1" id="add1">   <input type="text" name="add2" id="add2"> = <input type="text" name="sum" id="sum">
    </p>
    <button class="btn">点我求和</button>
    <script>
        $('.btn').click(function () {
                $.ajax({
                url: '/add/',
                type: 'post',
                data: {'add1':$('#add1').val(),'add2':$('#add2').val()},
                success:function (data) {
                    $("#sum").val(data)
                }
            })
        })
    </script>
</body>
</html>



AJAX上传文件

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form action="/sftp/" method="post" enctype="multipart/form-data">
    <p>用户名：<input type="text" name="name" id="name"></p>
    <p><input type="file" name="myfile" id="myfile"></p>
    <input type="submit" value="FORM表单提交">
</form>
<button id="btn">AJAX提交文件</button>
<script>
    $('#btn').click(function () {
        {# 上传文件 必须用formdata #}
        var formdata=new FormData()
        formdata.append('name',$('#name').val())
        {# 取出文件 #}
        formdata.append('myfile',$('#myfile')[0].files[0])

        $.ajax({
            url: '/sftp/',
            type: 'post',
            // 不预处理数据，如果不设置false，数据类似于(name=zls&age=18)
            processData:false,
            // contentType指定往后台传数据的编码格式 （urlencoded，formdata，json）
            // false：使用formdata对象处理了数据，就不需要指定编码了。
            contentType:false,
            data: formdata,
            success:function (data) {
                alert(data)
            }
        })
    })
</script>
</body>
</html>
代码语言：javascript复制
from django.shortcuts import render, HttpResponse, redirect
import time


# Create your views here.

def sftp(request):
    if request.method == 'GET':
        return render(request,'sftp.html')
    name = request.POST.get('name')
    print(name)
    dic_files=request.FILES
    myfile = dic_files.get('myfile')
    with open(myfile.name,'wb') as f:
        #  循环上传过来的文件
        for line in myfile:
            # 往空文件中写
            f.write(line)
    return HttpResponse('OK')
代码语言：javascript复制
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^$', views.index),
    url(r'^add/$', views.add),
    url(r'^sftp/$', views.sftp),
]





AJAX 提交 Json数据

application/json

application/json 这个 Content-Type 作为响应头大家肯定不陌生。实际上，现在越来越多的人把它作为请求头，用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行，除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理 JSON 的函数，使用 JSON 不会遇上什么麻烦。

JSON 格式支持比键值对复杂得多的结构化数据，这一点也很有用。记得我几年前做一个项目时，需要提交的数据层次非常深，我就是把数据 JSON 序列化之后来提交的。不过当时我是把 JSON 字符串作为 val，仍然放在键值对里，以 x-www-form-urlencoded 方式提交。

写页面提交Json数据

代码语言：javascript复制
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <title>提交JSON数据给后台</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form enctype="multipart/form-data">
    <p>用户名：<input type="text" name="name" id="name"></p>
    <p>密码：<input type="password" name="pwd" id="pwd"></p>
</form>
<button id="btn">AJAX提交Json</button>
<script>
    $('#btn').click(function () {
        var post_data={'name':$('#name').val(),'pwd':$('#pwd').val()}
        // 字典转成Json字符串使用JSON.stringify 相当于 python中json.dumps
        var post_data = JSON.stringify(post_data)
        $.ajax({
            url: '/add_json/',
            type: 'post',
            contentType: 'application/json',
            data: post_data,
            success:function (data) {
                // 如果data是Json字符串，使用JSON.parse转成字典
                // console.log(typeof data)
                // var res = JSON.parse(data)
                alert(data)
            }
        })
    })
</script>
</body>
</html>
代码语言：javascript复制
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^$', views.index),
    url(r'^add/$', views.add),
    url(r'^sftp/$', views.sftp),
    url(r'^add_json/$', views.add_json),
]
代码语言：javascript复制
from django.shortcuts import render, HttpResponse, redirect
import time
from django.http import JsonResponse


# Create your views here.

def add_json(request):
    if request.method == 'GET':
        return render(request, 'json.html')
    else:
        import json
        res = json.loads(request.body.decode('utf-8'))
        name = res['name']
        pwd = res['pwd']

        ## 返回json格式给前端
        dic = {'user': name, 'password': pwd}
        print(dic)
        return HttpResponse(json.dumps(dic))
        # return JsonResponse(dic)

注意，有两种方法，前端可以不用转格式 1.使用JsonResponse，返回的直接是一个对象，前端不用再转类型了可以直接使用。 2.在前端加上dataType:'json'，返回的内容也是一个对象，前端也可以直接使用。



serializers

Django内置的serializers（把对象序列化成json字符串）

代码语言：javascript复制
from django.core import serializers
def test(request):
    book_list = Book.objects.all()    
    ret = serializers.serialize("json", book_list)
    return HttpResponse(ret)
ajax 运维 xml 自动化 文件存储

0 人点赞