2022学Django----基础五之Ajax

最新推荐文章于 2024-07-12 17:38:35 发布

HDX柿子

最新推荐文章于 2024-07-12 17:38:35 发布

阅读量693

点赞数

文章标签： django ajax javascript

本文链接：https://blog.csdn.net/zxjoke/article/details/124490520

版权

本文详细介绍了如何在Django中使用Ajax进行前后端数据传输，包括HttpResponse和JsonResponse的使用，Ajax的POST请求，文件上传，Json格式提交，Django内置序列化，以及结合layer弹窗实现二次确认的示例。

摘要由CSDN通过智能技术生成

尊重原创版权: https://www.gewuweb.com/hot/5401.html

Django基础五之Ajax

尊重原创版权: https://www.gewuweb.com/sitemap.html

1. Ajax介绍

Django基础五之Ajax

2. Ajax前后端传值

Django基础五之Ajax

在输入框一和输入框二中分别输入一个数字，然后点提交在第三个输入框中显示结果.

HTML 代码:

<body>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <input type="text" id="d1" >+
            <input type="text" id="d2">=
            <input type="text" id="d3">
            <button id="d4" class="btn">提交</button>
        </div>
    </div>
</div>
</body>

2.1 方法一HttpResponse直接返回

html 页面代码:

<body>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <input type="text" id="d1" >+
            <input type="text" id="d2">=
            <input type="text" id="d3">
            <button id="d4" class="btn btn-warning">提交</button>
        </div>
    </div>
</div>

<script>
    $("#d4").click(function (){
        var num1 = $("#d1").val();
        var num2 = $("#d2").val();
        console.log(num1, num2);

        //拿到参数后使用Ajax向后提交
        $.ajax({
            url:"/index/",  // 请求的地址
            type:"post",    // 请求的方式, 使用method()也可以
            data:{num1:num1, num2:num2},   //指定要提交给后端的数据
            success: function (res){ // 返回成功走sucess,接收后端返回的结果
                // 后端返回的数据都放在res里面
                console.log(res)
                $('#d3').val(res)
               // .val()里面什么都不写为取值， 如果里面写数据为设置值
            }
        });

    })
</script>
</body>

views.py 代码

from django.shortcuts import render,HttpResponse

def index(request):
    if request.method == 'POST':  #     if request.is_ajax(): 判断是不是ajax请求
        n1 = request.POST.get('num1')
        n2 = request.POST.get('num2')
        n3 = int(n1) + int(n2)
        return HttpResponse(n3)
    return render(request, 'index.html')

2.2 方法二使用Json格式返回

上面例子返回的是个数字，如果返回的是多个值，或者是不同的类型，那么就要用 json 格式传输

2.2.1 HttpResponse 返回json类型

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

def index(request):
    #if request.method == 'POST':
    if request.is_ajax():
        n1 = request.POST.get('num1')
        n2 = request.POST.get('num2')
        n3 = int(n1) + int(n2)
        res_dict = {'username':'Hans', 'n3':n3}
        import json
        # 序列化成json类型的字符串
        res_dict = json.dumps(res_dict)
        return HttpResponse(res_dict)
    return render(request, 'index.html')

** 前端处理Json **

<body>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <input type="text" id="d1" >+
            <input type="text" id="d2">=
            <input type="text" id="d3">
            <button id="d4" class="btn btn-warning">提交</button>
        </div>
    </div>
</div>

<script>
    $("#d4").click(function (){
        var num1 = $("#d1").val();
        var num2 = $("#d2").val();
        console.log(num1, num2);

        //拿到参数后使用Ajax向后提交
        $.ajax({
            url:"/index/",  // 请求的地址
            type:"post",    // 请求的方式,使用method()也可以
            data:{num1:num1, num2:num2},   //指定要提交给后端的数据
            success: function (res){ // 接收后端返回的结果
                // 后端返回的数据都放在res里面
				// 后端传过来的是json格式的string,所以要先反序列化
                res_json = JSON.parse(res)
                // 取值                    
                console.log(res_json.n3)
                $('#d3').val(res_json.n3)
            }
        });

    })
</script>
</body>

2.2.2 JsonResponse返回

** views.py **

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

def index(request):
    if request.is_ajax():
        n1 = request.POST.get('num1')
        n2 = request.POST.get('num2')
        n3 = int(n1) + int(n2)
        res_dict = {'username':'Hans', 'n3':n3}
        return JsonResponse(res_dict)
    return render(request, 'index.html')

** 前端处理 **

<body>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <input type="text" id="d1" >+
            <input type="text" id="d2">=
            <input type="text" id="d3">
            <button id="d4" class="btn btn-warning">提交</button>
        </div>
    </div>
</div>

<script>
    $("#d4").click(function (){
        var num1 = $("#d1").val();
        var num2 = $("#d2").val();
        console.log(num1, num2);

        //拿到参数后使用Ajax向后提交
        $.ajax({
            url:"/index/",  // 请求的地址
            type:"post",    // 请求的方式,使用method()也可以
            data:{num1:num1, num2:num2},   //指定要提交给后端的数据
            success: function (res){

最低0.47元/天解锁文章

HDX柿子

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
2022学Django----基础五之Ajax

尊重原创版权: https://www.gewuweb.com/hot/5401.htmlDjango基础五之Ajax尊重原创版权: https://www.gewuweb.com/sitemap.html1. Ajax介绍Django基础五之Ajax2. Ajax前后端传值在输入框一和输入框二中分别输入一个数字，然后点提交在第三个输入框中显示结果.HTML 代码:<body><div class="container"> <div class="
复制链接

扫一扫