django(ajax基本语法)

urls

from django.conf.urls import url
from django.contrib import admin
from dbapp import views

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'ttt/',views.ttt),
]
urls.py

views.py

from django.shortcuts import render,HttpResponse

# Create your views here.

def ttt(request):
    if request.method == 'POST':
        print(request.POST)
        i1 = request.POST.get('i1')
        i2 = request.POST.get('i2')
        i3 = int(i1) + int(i2)
        return HttpResponse(i3)
        # 前端没有配置dataType:'JSON'时
        from django.http import JsonResponse
        # 如果返回一个字典，到前端是字符串类型。
        # 可以用jsonesponse来返回，这样到前端回调函数自动反序列化，获取的是对象
        # 直接args.来获取键值对
        dic = {'a':1,'b':2}
        return JsonResponse(dic)
    return render(request,'ttt.html')
View Code

ttt.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <title>Title</title>
</head>
<body>
<input type="text" id="d1">+
<input type="text" id="d2">=
<input type="text" id="d3">
<p>
    <button id="btn">点我</button>
</p>


<script>
    // 给按钮绑定点击事件
    $('#btn').click(function (){
        // 朝后端发送ajax请求
        $.ajax({
            // 1、指定朝哪个后端发送ajax请求
            url:'', //不写默认朝当前地址提交
            // 2、请求方式
            type:'post', //不写默认为get
            // 3、数据
            data:{'i1':$('#d1').val(),'i2':$('#d2').val()},
            // 当后端是以HttpResponse返回json格式的数据时，前端默认不会反序列化，有三种方法可以让前端获取到反序列化的结果
            // 方法1、在前端配置dataType:'JSON'参数
            // 方法2、在前端手动反序列化JSON.parse()
            // 方法3、在后端用JsonResponse返回数据
            dataType:'JSON',
            // 4、回调函数,当后端返回结果的时候会自动触发，agrs接收后端的返回结果
            success:function (args){
                $('#d3').val(args)
            }

        })
    })
</script>
</body>
</html>
ttt.html

 

posted @ 2021-03-27 23:36  丑矬穷屌  阅读(46)  评论(0)    收藏  举报