当前位置： 移动技术网 > IT编程>脚本编程>Python > Django 系列博客（十四）

Django 系列博客（十四）

2019年01月21日  | 移动技术网IT编程  | 我要评论

上海空姐门,九阴真经天梯赛怎么参加,梦幻诛仙胡萝卜丝

django 系列博客（十四）

前言

本篇博客介绍在 html 中使用 ajax 与后台进行数据交互。

什么是 ajax

ajax（asynchronous javascript and xml）翻译成中文就是‘’异步 javascript 和 xml‘’。即使用 javascript 语言与服务器进行异步交互，传输的数据为 xml（现在更多地使用 json）。

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

ajax 除了异步的特点外，还有一个就是：浏览器页面局部刷新。在页面没有进行刷新的情况下进行数据交互。

优点：

  • ajax 使用javascript 技术向服务器发送异步请求；
  • ajax 无需刷新整个页面。

基于 jquery 的 ajax 实现

前端代码

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script src="/static/jquery-3.3.1.js"></script>

    <title>regist</title>
{#    <link rel="stylesheet" href="/static/jquery-3.3.1.js">#}
</head>
<body>
<p>用户：<input type="text" id="name"></p>
<p>密码：<input type="password" id="pwd"></p>
<p>确认密码：<input type="password" id="tpwd"></p>
<input type="button" id="submit" value="提交"><span id="error"></span>
</body>

<script>

    $('#submit').click(function () {
        console.log($('#submit'));
        {#$.ajax({#}
        {#    url:'/regist/',#}
        {#    type:'post',#}
        {#    data:{name:$("#name").val(), pwd:$("#pwd").val(), tpwd:$("#tpwd")},#}
        {#    success:function (data) {#}
        {#        console.log(data)#}
        {#    }#}
        $.ajax({
            url:'/regist/',
            type:'post',
            data:{name:$("#name").val(), pwd:$("#pwd").val(), tpwd:$("#tpwd").val()},
            success:function (data) {
                console.log(data)
            }
        })

    })
</script>
</html>

后端代码

from django.http import jsonresponse
from django.shortcuts import render, redirect
from app01.models import *

# create your views here.


def wrapper(func):
    def inner(*args, **kwargs):
        if args[0].method == 'get':
            return func(*args, **kwargs)
        elif kwargs['contenttype'] == 'application/json':
            import json
            args[0].post = json.loads(args[0].body)
            return func(*args, **kwargs)
        else:
            return func(*args, **kwargs)
    return inner

import json
# json.loads()


def regist(request):
    dic = {'status': 200, 'msg': none}
    print(request.body)
    if request.method == 'get':
        return render(request, 'regist.html')
    else:
        print('/////')
        print(request.post, 'dddd')
        name = request.post.get('name')
        pwd = request.post.get('pwd')
        tpwd = request.post.get('tpwd')

        user = userinfo.objects.filter(name=name).first()
        if user:
            dic['status'] = 100
            dic['msg'] = '用户已存在'
            return jsonresponse(dic)
        else:
            if name and pwd and tpwd:
                if pwd == tpwd:
                    userinfo.objects.create(name=name, pwd=pwd)
                    dic['msg'] = '注册成功'
                    return jsonresponse(dic)
                else:
                    dic['status'] = 101
                    dic['msg'] = '两次密码不一样'
                    return jsonresponse(dic)
            else:
                dic['status'] = 101
                dic['msg'] = '密码不正确'
                return jsonresponse(dic)


@wrapper
def login(request):
    dic = {'status': 200, 'msg': none}
    if request.method == 'get':
        return render(request, 'login.html')
    else:
        name = request.post.get('name')
        pwd = request.post.get('pwd')

        user = userinfo.objects.filter(name=name).first()
        if not user:
            dic['status'] = 100
            dic['msg'] = '用户不存在，请注册'
            return jsonresponse(dic)
        else:
            if pwd == user.pwd:
                dic['msg'] = '登陆成功'
                return jsonresponse(dic)
            else:
                dic['status'] = 101
                dic['msg'] = '密码错误'
                return jsonresponse(dic)

js代码

$("#submit3").click(function () {
            $.ajax({
                url: '/auth/',
                type: 'post',
                data: {
                    'user': $("#id_name").val(),
                    'password': $('#id_password').val()
                },

                success: function (data) {
                    {#console.log(data)#}
                    var data=json.parse(data)
                    if (data.user){
                        location.href='https://www.baidu.com'
                    }else {
                        $(".error").html(data.message).css({'color':'red','margin-left':'20px'})
                    }
                }


            })
        }
    )

文件上传

请求头

  1. application/x-www-form-urlencoded

这是最常见的 post 提交数据的方式了。浏览器的原生

表单，如果不设置 enctype 属性，那么最终会以 application/x-www-form-urlencoded方式提交数据。类似于下面：

post http://www.example.com http/1.1
content-type: application/x-www-form-urlencoded;charset=utf-8

请求体
  1. multipart/form-data

当我们使用表单上传文件时，必须让表单的 enctype 等于multipart/form-data。

post http://www.example.com http/1.1
content-type:multipart/form-data; boundary=----webkitformboundaryrgkcby7qhfd3trwa

------webkitformboundaryrgkcby7qhfd3trwa
content-disposition: form-data; name="user"

yuan
------webkitformboundaryrgkcby7qhfd3trwa
content-disposition: form-data; name="file"; filename="chrome.png"
content-type: image/png

png ... content of chrome.png ...
------webkitformboundaryrgkcby7qhfd3trwa--

这个例子稍微复杂点。首先生成了一个 boundary 用于分割不同的字段，为了避免与正文内容重复，boundary 很长很复杂。然后 content-type 里指明了数据是以 multipart/form-data 来编码，本次请求的 boundary 是什么内容。消息主体里按照字段个数又分为多个结构类似的部分，每部分都是以--boundary 开始，紧接着是内容描述信息，然后回车，最后是字段具体内容（文本或二进制）。如果传输的是文件，还要包含文件名和文件类型信息。消息主体最后以--boundary--表示结束。

这种方式一般用于上传文件，各大服务端语言也有很好的支持。

这两种post 提交的方式，都是浏览器原生支持的，而且先阶段标准中原生表单也只支持这两种方式（通过元素的 enctype 属性指定，默认为 application/x-www-form-urlencoded）。随着越来越多的web站点尤其是 webapp，全部使用 ajax 进行数据交互之后，我们完全可以定义新的数据提交方式，给开发带来更多便利。

  1. application/json

application/json是另外一种请求头，不过更多的是作为响应头，因为 json 格式的数据时通用数据格式。不过目前也用来作为请求头，用来告诉服务器端主体是序列化后的 json 字符串。由于 json 规范的流行，除了低版本的 ie 之外的各大浏览器都原生支持 json.stringfy，服务器端语言也都有处理 json数据的函数，使用 json 不会遇到什么麻烦。

json 格式支持比键值对复杂的多的结构化数据，这点对数据传输很有用。

基于form表单上传文件

前端代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
</head>
<body>

<form action="" method="post" enctype="multipart/form-data">
    <p>用户名:<input type="text" name="name"></p>
    <input type="file" name="myfile">
{#    <input type="file" name="myfile2">#}
    <input type="submit" value="提交">

</form>

</body>
</html>

后端代码

class uploadfile(view):

    def get(self, request):
        return render(request, 'upload_file.html')

    def post(self, request):
        file = request.files.get('myfile')
        # print(file['file'])
        from django.core.files.uploadedfile import inmemoryuploadedfile
        print(time.time())
        filename = str(time.time()).split('.')[0] + file.name
        with open(filename, 'wb') as f:
            for line in file:
                f.write(line)
        return httpresponse('上传成功')

基于ajax 的文件上传

前端代码

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>uploadfile</title>
    <script src="/static/jquery-3.3.1.js"></script>
</head>
<body>
<p>用户名：<input type="text" id="name"></p>
<p>选择文件：<input type="file" id="my_file"></p>
<button id="btn">上传</button><span id="msg"></span>
</body>

<script>
    $('#btn').click(function () {
        var myfile = $('#my_file')[0].files[0];
        var formdata = new formdata();
        formdata.append('name', $('#name').val());
        formdata.append('myfile', myfile);
        $.ajax({
            url:'/uploadfile/',
            type:'post',
            processdata:false, // 告诉 jquery 不要处理发送的数据
            contenttype:false, // 告诉 jquery 不要设置 content-type 请求头
            data:formdata,
            success:function (data) {
                console.log(data);
                $('#msg').text(data)
            }
        })
    })

</script>
</html>

后端代码

media_path = '/users/jingxing/django/homework/paging/media'

def uploadfile(request):
    if request.method == 'get':
        return render(request, 'uploadfile.html')
    else:

        myfile = request.files.get('myfile')
        print(myfile)
        filepath = os.path.join(media_path, myfile.name[32:-3]+'jpg')
        with open(filepath, 'wb') as f:
            for line in myfile:
                f.write(line)
        fileinfo.objects.create(name=request.post.get('name'), filepath=filepath)
        return httpresponse('上传成功')

ajax 提交 json 格式数据

前端代码

$('#submit1').click(function () {
        postdata={name1:$("#name").val(),pwd2:$("#pwd").val()}
        $.ajax({
            url:'/loginjson/',
            type:'post',
            // 指定提交的编码格式是json格式,
            contenttype:'application/json',
            data:json.stringify(postdata),
            // data:postdata,
            // data:'123',
            success:function (data) {
                console.log(data)

            }
        })
    })

后端代码

def loginjson(request):
    dic={'status':100,'msg':none}
    if request.method=='post':
        print(request.post)
        print(request.get)
        print(request.body)
        xx=request.body.decode('utf-8')
        # re是个字典{"name1":"lqz","pwd2":"123"}
        re=json.loads(xx)
        request.post=11


        print(request.post)
        #
        #
        # name=re.get('name1')
        # pwd=re.get('pwd2')
        # print(name)
        # print(pwd)
        return httpresponse('ok')

后端返回 json 数据

前端代码

$('#submit').click(function () {
        $.ajax({
            url:'/login/',
            type:'post',
            data:{name1:$("#name").val(),pwd2:$("#pwd").val()},
            success:function (data) {
                //后台用jsonresponse返回数据
                //data 就会被转成字典
                console.log(data)
                console.log(typeof data)
                //json.parse(data) 把字符串类型转成字典
                data=json.parse(data)
                {#json.stringify()#}
                console.log(typeof dat1)
                if(data.status == 100){
                    //成功,跳转到指定页面
                    //location.href=地址,前端就会跳转到指定的url
                    alert(data.msg)
                    //$("#error").text(data.msg+'正在跳转')
                    //location.href=data.url
                }else{
                    $("#error").text(data.msg)
                }


            }
        })
    })

后端代码

def login(request):
    dic={'status':100,'msg':none}
    if request.method == 'get':
        return render(request, 'login.html')
    # if request.is_ajax():
    if request.method=='post':
        name=request.post.get('name1')
        pwd=request.post.get('pwd2')
        if name=='lqz' and pwd=='123':
            dic['msg'] = '登陆成功'
            # 想让前端跳转
            # dic['url']='http://www.baidu.com'
            dic['url']='/test/'
        else:
            # 返回json格式字符串
            dic['status']=101
            dic['msg']='用户名或密码错误'
        # return jsonresponse(dic)
        return httpresponse(json.dumps(dic))

django内置的序列化数据方法

from django.core import serializers

def test(request):
    book_list = book.objects.all()
    ret = serializers.serialize('json', book_list)
    return httpresponse(ret)

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网