django之Ajax

Posted 梁少华

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了django之Ajax相关的知识,希望对你有一定的参考价值。

1. 向服务器发送请求的途径

1.浏览器地址,默认get请求

2.form表单:

get请求

post请求

3.a标签,默认get请求

4.Ajax请求

特点:

1.异步请求

2.局部刷新

 

2. Ajex简介

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

  • 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求;

  • 异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求。

AJAX除了异步的特点外,还有一个就是:浏览器页面局部刷新;(这一特点给用户的感受是在不知不觉中完成请求和响应过程)

优点:

  • AJAX使用Javascript技术向服务器发送异步请求

  • AJAX无须刷新整个页面

Ajax的简单实现、计算求值、登陆验证

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>

<h2>This is index!</h2>

<button class="Ajax">Ajex</button>
<p class="content"></p>

<hr>
<input type="text" id="num1"> + <input type="text" id="num2"> = <input type="text" id="ret">
<button class="cal">计算</button>

<hr>

<form>  <!-- form都可以不用,但一般来说还是把表单标签放到form里面 -->
    用户名 <input type="text" id="user">
    密码 <input type="password" id="pwd">
    <input type="button" value="submit" class="login_btn">  <!-- 不能用submit,用submit就是form表单发请求了,不是ajax -->
    <span class="error"></span>
</form>

<script src="/static/jquery-3.3.1.js"></script>

<script>

    // 发送Ajax请求
    $(".Ajax").click(function () {
        // 发送Ajax请求
        $.ajax({
            url: /test_ajax/,      // 请求url
            type: get,   // 或post
            data: {a: 1, b: 2},
            success: function (data) {  // 回调函数:某个时间完成之后再去执行的函数
                $(".content").text(data)
            }

        })
    });


    // Ajax计算求值
    $(.cal).click(function () {
        let num1 = $(#num1).val();
        let num2 = $(#num2).val();
        $.ajax({
            url: /cal/,
            type: post,
            data: {
                n1: num1,
                n2: num2,
            },
            success: function (data) {   // 请求结果交给success函数
                $(#ret).val(data);
            }
        })
    });

    // 登陆验证
    $(.login_btn).click(function () {
        let user = $(#user).val();
        let pwd = $(#pwd).val();
        $.ajax({
            url: "/login/",
            type: post,
            data: {
                "username": user,
                "pwd": pwd,
            },
            success: function (data) {
                console.log(data);  // json字符串
                let parsed_data = JSON.parse(data); // 反序列化成 object类型  {}。 如果传的是列表就反序列化成数组类型

                if (parsed_data.user) {
                    location.href = https://www.baidu.com
                } else {
                    $(.error).html(parsed_data.msg).css({color:red,margin-left:10px});
                }
            }
        })
    });

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

 

views.py

from django.shortcuts import render, HttpResponse
# Create your views here.

from app01.models import User
import json


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


def test_ajax(request):
    print(request.GET)
    return HttpResponse(hello edward)


def cal(request):
    n1 = int(request.POST.get(n1))
    n2 = int(request.POST.get(n2))
    ret = n1 + n2

    return HttpResponse(ret)


def login(request):
    username = request.POST.get(username)
    pwd = request.POST.get(pwd)

    user = User.objects.filter(username=username, pwd=pwd).first()

    res = {user: None, msg: None}

    if user:
        res[user] = user.username
    else:
        res[msg] = username or password wrong!
    return HttpResponse(json.dumps(res))

 

基于form表单的文件上传

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>file put</title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
    用户名 <input type="text" name="user">
    头像 <input type="file" name="avatar">
    <input type="submit">
</form>
</body>

 

views.py

def file_put(request):
    if request.method == POST:
        print(request.POST)
        print(request.FILES)  # 文件对象

        file_obj = request.FILES.get(avatar)

        with open(file_obj.name, wb) as f:
            for line in file_obj:
                f.write(line)

        return HttpResponse(OK)

    return render(request, file_put.html)

 

contentType

<h3>简单的form</h3>
<!-- 默认请求头是 "application/x-www-form-urlencoded" -->
<form action="" method="post" enctype="application/x-www-form-urlencoded">
    用户名 <input type="text" name="user">
    密码 <input type="password" name="pwd">
</form>

<h3>基于form表单的文件上传</h3>

<!-- 请求头 multipart/form-data -->
<form action="" method="post" enctype="multipart/form-data">
    用户名 <input type="text" name="user">
    头像 <input type="file" name="avatar">
    <input type="submit">
</form>

<h3>基于Ajax文件上传</h3>

<form action="" method="post">
    用户名 <input type="text">
          <input type="button" class="btn" value="Ajax">
</form>

<script>
    $(.btn).click(function () {  // 还未实现,只是说明ajax不是用multipart/form-data上传文件的
        $.ajax({
            url:‘‘,
            type:post,
            data:{   // 请求头默认也是application/x-www-form-urlencoded
                a:1,
                b:2
            },
            success:function () {
                console.log(data)
            }
        })
    })
</script>

 

Ajax传递json数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>file put</title>
</head>
<body>
<h3>基于Ajax文件上传</h3>

<form action="" method="post">
    用户名 <input type="text">

    <input type="button" class="btn" value="Ajax">
</form>

<script src="/static/jquery-3.3.1.js"></script>

<script>
    $(.btn).click(function () {
        $.ajax({
            url:‘‘,
            type:post,
            contentType:application/json,
            data:JSON.stringify({
                a:1,
                b:2
            }),
            success:function () {
                console.log(data)
            }
        })
    })
</script>
</body>
</html>

 

views.py

def file_put(request):
    if request.method == POST:
        print(body, request.body)  # 请求报文中的请求体  body b‘{"a":1,"b":2}‘
        print(post, request.POST)  # if contentType==urlencoded,request.POST才有数据。如果是urlencoded,那就把数据转换成字典,方便取值 post。此次传送的是json数据,所以没有值。 <QueryDict: {}>
        return HttpResponse(OK)

    return render(request, file_put.html)

 

基于Ajax的文件上传

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>file put</title>
</head>
<body>
<h3>基于Ajax文件上传</h3>

<form action="" method="post">
    用户名 <input type="text" id="user">
    头像 <input type="file" id="avatar">

    <input type="button" class="btn" value="Ajax">
</form>

<script src="/static/jquery-3.3.1.js"></script>

<script>
    $(.btn).click(function () {
        let formdata = new FormData();
        let user = $(#user).val();
        let avatar = $(#avatar)[0].files[0];
        formdata.append("user", user);
        formdata.append(avatar, avatar);

        $.ajax({
            url: ‘‘,
            type: post,
            contentType: false,  // 不做任何编码
            processData: false,  // 不到预处理
            data: formdata,
            success: function (data) {
                console.log(data)
            }
        })
    })
</script>
</body>
</html>

 

views.py

def file_put(request):
    if request.method == POST:
        print(post, request.POST)
        print(file,request.FILES)

        file_obj = request.FILES.get(avatar)

        with open(file_obj.name, wb) as f:
            for line in file_obj:
                f.write(line)

        return HttpResponse(OK)

    return render(request, file_put.html)

 

 

 

以上是关于django之Ajax的主要内容,如果未能解决你的问题,请参考以下文章

Django之原生Ajax操作

django基础知识之Ajax:

django之jquery完成ajax

Django之AJAX请求

django之使用jquery完成ajax

Django之ajax的数据传输和分页器