【Django】教程-10-ajax请求Demo,结合使用

【Django】教程-1-安装+创建项目+目录结构介绍
【Django】教程-2-前端-目录结构介绍
【Django】教程-3-数据库相关介绍
【Django】教程-4-一个增删改查的Demo
【Django】教程-5-ModelForm增删改查+规则校验【正则+钩子函数】
【Django】教程-6-搜索框-条件查询前后端
【Django】教程-7-分页,默认使用django的
【Django】教程-8-页面时间组件
【Django】教程-9-登录+退出

16. ajax

16.1 GET请求

login目录text.html

html 复制代码
{% extends 'login/layout.html' %}
{% block content %}
    <h3>示例 1</h3>
    <input id="btn1" type="button" class="btn-primary" value="点击1" onclick="clickMe();"/>

{% endblock %}

{% block js %}
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        function clickMe() {
            console.log("进来了")

            $.ajax({
                url: '/task/ajax/',
                type: 'get',
                data: {
                    n1: 123,
                    n2: 456
                },
                success: function (res) {
                    console.log(res);
                }
            })
        }
    </script>
{% endblock %}

views目录account.py文件

python 复制代码
def task_list(r):
    "显示一个页面,用于ajax"
    return render(r, 'login/test.html')
def task_ajax(req):
    print(req.method)
    print(req.GET.get('n1'))
    return HttpResponse("成功了!")

urls.py

python 复制代码
from django.urls import path
from appTang.views import department_views, user_views, admin_views, account

# 映射关系,视图--->函数
urlpatterns = [
    path('task/list', account.task_list),
    path('task/ajax/', account.task_ajax),

]

16.1 POST请求

html 复制代码
{% block js %}
    <script type="text/javascript">
        function clickMe() {
            console.log("进来了")
            $.ajax({
                url: '/task/ajax/',
                type: 'post',
                data: {
                    n1: 123,
                    n2: 456
                },
                success: function (res) {
                    console.log(res);
                }
            })
        }
    </script>
{% endblock %}
python 复制代码
from django.views.decorators.csrf import csrf_exempt

@csrf_exempt # 对单个函数关掉,csrf校验
def task_ajax(req):
    print(req.method)
    print(req.POST)
    return HttpResponse("成功了!")

16.3 绑定事件

html 复制代码
{% block js %}
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function (){
            // 页面框架加载完成之后,代码自动执行
            bindBtnEvent();

        })
        function bindBtnEvent(){
            {# 可以,发送ajax请求 #}
            $.ajax({
                url: '/task/ajax/',
                type: 'post',
                data: {
                    n1: 123,
                    n2: 456
                },
                success: function (res) {
                    console.log(res);
                }
            })
        }
    </script>
{% endblock %}

16.4 ajax请求返回值

ajax 通常都是返回json格式数据

python 复制代码
data_dict = {"status": True, "data": [11, 22, 33, 44]}
# 两种方式都可以
# json_string = json.dumps(data_dict)
# return HttpResponse(json_string)

return JsonResponse(data_dict)
js 复制代码
$.ajax({
    url: '/task/ajax/',
    type: 'post',
    data: {
        n1: 123,
        n2: 456
    },
    {# 将返回值,变成json对象 ,后面可以直接 .属性#}
    dataType: "JSON", 
    success: function (res) {
        console.log(res);
    	console.log(res.data);
    }
})

16.5 表单提交

两种方式,一种form,一种一个一个的val

$("#form3").serialize()

n1: $("#txtUser").val(),

html 复制代码
{% extends 'login/layout.html' %}
{% block content %}
    <div>
        <div class="container">
            <h3>示例2 </h3>
            <input type="text" id="txtUser" placeholder="姓名"/>
            <input type="text" id="txtAge" placeholder="年龄"/>
            <input type="button" id="btn2" class="btn btn-primary" value="点击2"/>

            <h3>示例3 </h3>
            <form id="form3">
                <input type="text" name="username" placeholder="姓名"/>
                <input type="text" name="age" placeholder="年龄"/>
                <input type="text" name="email" placeholder="邮箱"/>
                <input type="text" name="more" placeholder="简介"/>
            </form>
            <input type="button" id="btn3" class="btn btn-primary" value="点击3"/>
        </div>
    </div>
{% endblock %}
{% block js %}
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">

        $(function () {
            bindBtn2Event();
            bindBtn3Event();
        })

        function bindBtn2Event() {
            $("#btn2").click(function () {
                $.ajax({
                    url: '/task/ajax/',
                    type: 'post',
                    data: {
                        n1: $("#txtUser").val(),
                        n2: $("#txtAge").val(),
                    },
                    dataType: "JSON",
                    success: function (res) {
                        console.log(res);
                        console.log(res.status);
                    }
                })
            })

        }

        function bindBtn3Event() {
            $("#btn3").click(function () {
                $.ajax({
                    url: '/task/ajax/',
                    type: 'post',
                    data: $("#form3").serialize(),
                    dataType: "JSON",
                    success: function (res) {
                        console.log(res);
                        console.log(res.data);
                    }
                })
            })

        }
    </script>
{% endblock %}
相关推荐
Doker 多克2 小时前
Django 缓存框架
python·缓存·django
noravinsc5 小时前
django admin 中更新表数据 之后再将数据返回管理界面
数据库·django·sqlite
Bruce-li__7 小时前
DRF凭什么更高效?Django原生API与DRF框架开发对比解析
数据库·django·sqlite
noravinsc7 小时前
connection.cursor() 与 models.objects.filter
数据库·django·原生查询·orm查询
终身学习基地10 小时前
第三篇:Django创建表关系及生命周期流程图
django·sqlite·流程图
noravinsc1 天前
django admin AttributeError: ‘UserResorce‘ object has no attribute ‘ID‘
数据库·django·sqlite
声声codeGrandMaster1 天前
django之优化分页功能(利用参数共存及封装来实现)
数据库·后端·python·django
学c真好玩1 天前
Django创建的应用目录详细解释以及如何操作数据库自动创建表
后端·python·django
沐暖沐1 天前
Django(快速上手版)
python·django
@_猿来如此1 天前
Django 实现电影推荐系统:从搭建到功能完善(附源码)
数据库·后端·python·django