Python学习之路—2018/7/2

最新推荐文章于 2024-09-15 22:31:42 发布

de0516

最新推荐文章于 2024-09-15 22:31:42 发布

阅读量112

点赞数

文章标签： python json javascript ViewUI

原文链接：http://www.cnblogs.com/ExBurner/p/9256198.html

版权

Python学习之路—2018/7/2

1.Ajax

Ajax简介

向浏览器发送请求的途径有：

浏览器地址栏，默认为get请求
a标签，默认为get请求
form表单：get请求和post请求
Ajax：get请求和post请求（特点：异步交互，局部刷新）

Ajax（Asynchronous JavaScript and XML ）是异步的JavaScript与XML技术，使用Javascript语言与服务器进行异步交互

基于JQuery简单Ajax实现

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>Hello World</h1>
    <button class="ajax">Ajax</button>
    <p class="content"></p>
    <input type="text" id="num1">+<input type="text" id="num2">=<input type="text" id="result"><button class="cal">提交</button>
    </br>
    </br>
    <form>
        用户名<input type="text" id="user">
        密码<input type="password" id="pwd">
        <button class="sub" type="button">提交</button>
        <span class="error"></span>
    </form>
</body>
<script src="/static/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(".ajax").click(function () {
        $.ajax(
            {
                url:"/handle_ajax/",  // 请求url
                type:"get",  // 请求方式
                success:function (data) {  // 回调函数
                    console.log("hello");
                    $(".content").html(data)
                }
            }
        )
    });
    // 计算
    $(".cal").click(function () {
        $.ajax({
            url:"/cal",
            type:"get",
            data:{
                "num1":$("#num1").val(),
                "num2":$("#num2").val()
            },
            success:function (data) {
                $("#result").val(data)
            }
        })
    });
    // 登录验证
    $(".sub").click(function () {
        $.ajax({
            url:"/login/",
            type:"post",
            data:{
                "user":$("#user").val(),
                "pwd":$("#pwd").val()
            },
            success:function (data) {
                var status = JSON.parse(data);  // 反序列化
                console.log(status);
                if (status["user"]){
                    location.href = "http://www.baidu.com"
                }
                else {
                    $(".error").html(status["msg"]).css({"color": "red", "margin-left": "20px"})
                }
            }
        })
    })
</script>
</html>

views.py

def index(request):
    return render(request, "index.html")
def handle_ajax(request):
    return HttpResponse("hello")  # 对应回调函数的data
def cal(request):  # 计算
    num1 = int(request.GET.get("num1"))
    num2 = int(request.GET.get("num2"))
    result = num1 + num2
    return HttpResponse(result)
def login(request):  # 登录验证
    import json
    user = request.POST.get("user")
    pwd = request.POST.get("pwd")
    status = {"user": None, "msg": None}
    
    if user == "gyq" and pwd == "123":
        status = {"user": user, "msg": "登陆成功"}
    else:
        status["msg"] = "用户名或者密码错误!"
    return HttpResponse(json.dumps(status))  # 将字典序列化成json数据再返回

展示效果：

简单流程：

将ajax请求发送给路径handle_ajax
handle_ajax视图函数结果响应给data
执行回调函数

文件上传

基于form表单的文件上传

file_upload.html

<form action="" method="post">
    用户名<input type="text" name="username">
    头像<input type="file" name="avatar">
    <input type="submit">
</form>

此时头像并没有上传成功，在视图层中调用request.POST并不会得到文件，而只是得到文件的名字

需要给form表单设置enctype属性（默认为application/x-www-form-urlencoded）为multipart/form-data

<form action="" method="post" enctype="multipart/form-data">
    ...
</form>

在视图层中通过调用request.FILES得到文件，并通过文件操作将文件保存到本地。

当内容类型为urlencoded时，适合用request.POST取得数据，当内容类型为form-data（可以获得上传的文件）时，适合用request.FILES取得数据

views.py

def file(request):
    if request.method == "GET":
        return render(request, "file_upload.html")
    else:
        avatar = request.FILES.get("avatar")
        with open(avatar.name, "wb") as f:
            for l in avatar:
                f.write(l)

        return HttpResponse("OK")

基于Ajax的文件上传

file_upload.html

<form>
    用户名<input type="text" id="username">
    头像<input type="file" id="avatar">
    <input type="button" class="sub" value="提交">
</form>
<script type="text/javascript">
    $(".sub").click(function () {
        var formdata = new FormData();  // 实例化formdata
        formdata.append("user", $("#username").val());
        formdata.append("avatar", $("#avatar")[0].files[0]);  // 获取上传的文件

        $.ajax({
            url:"/file/",
            type:"post",
            data:formdata,
            contentType:false,  // 不设置内容类型
            processData:false,  // 不做预处理
            success:function (data) {
                console.log(data)
            }
        })
    })
</script>

2.Django的分页器

通过输入地址栏参数

view.py

from django.shortcuts import render
from .models import Book
from django.core.paginator import Paginator, EmptyPage
def index(request):
    # 批量插入数据
       book_list = []
    for i in range(0, 100):
        book = Book(title="book_%s" % str(i), price=i*i)
        book_list.append(book)
    Book.objects.bulk_create(book_list)
    
    # 分页器
    book_list = Book.objects.all()
    paginator = Paginator(book_list, 10)
    print("数据总数：", paginator.count)  # 数据总数： 100
    print("页码总数：", paginator.num_pages)  # 页码总数： 10
    print("页码范围：", paginator.page_range)  # 页码范围： range(1, 11)
    
    try:
        current_page = int(request.GET.get("page", 1))
        page = paginator.page(current_page)
    except EmptyPage as e:  # 当出现EmptyPage时，让当前页为第一页
        page = paginator.page(1)
    
    return render(request, "index.html", locals())

index.html

{% for book in page %}
    <li>{{ book.title }}:{{ book.price }}</li>
{% endfor %}

展示效果：

转载于:https://www.cnblogs.com/ExBurner/p/9256198.html

de0516

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫