Ajax的使用

最新推荐文章于 2022-05-04 09:33:04 发布

半日闲12138

最新推荐文章于 2022-05-04 09:33:04 发布

阅读量124

点赞数

分类专栏： Django 文章标签： Python

本文链接：https://blog.csdn.net/feiYu12138/article/details/83514022

版权

Django 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

问题：
使用视图将上下文数据传递给模板，需要先加载模板，再渲染模板等操作，最后生成html代码
再返回给浏览器。如此操作复杂且扩展性差，此时开发人员既写后台又写前端

解决：
使用ajax异步网络请求

Json:
存储数据的一种结构
组成  {} 表示字典  [] 表示列表   ：表示键值对  ,分隔两个部分
作用  用于网络传输

代码：

urlpatterns = [
    url(r'^index/$',views.index),
    url(r'^students/$', views.students),

from django.shortcuts import render
from myApp.models import Grade,Student
from django.http import HttpResponse,JsonResponse
# Create your views here.

def index(request):
    return render(request,'myApp/index.html')
def students(request):
    if not request.is_ajax:
       return HttpResponse("请求错误")
    else:
        ss = Student.objects.all()
        objs = []
        for item in ss:
            obj = {}
            obj["name"] = item.name
            obj["age"] = item.age
            objs.append(obj)
    #JsonResponse会将数据进行序列化操作（将对象转化为字典），模型对象无法被直接转为字典
        return JsonResponse({"ss":objs})


<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>

    <script type="text/javascript" src="{% static 'myApp/js/jquery-3.1.1.min.js' %}"></script>

</head>
<body>

<button id="btn">显示学生</button>
<ul id="sl">  </ul>

<script type="text/javascript">
    $(function () {
        $("#btn").bind("click",function () {
            //发起ajax网络请求
            $.ajax({
            url:"/students/",
            type:"get",
            data:{},
            success:function (data,status) {
                $ul = $("#sl");
                arr = data.ss;
                for(var i = 0;i <arr.length;i++ ){
                    item = arr[i];
                    $li = $("<li>"+item.name+item.age+"</li>");
                    $ul.append($li)
                }
            }
        })
    })
    })
</script>
</body>
</html>

半日闲12138

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax的使用

问题：使用视图将上下文数据传递给模板，需要先加载模板，再渲染模板等操作，最后生成html代码再返回给浏览器。如此操作复杂且扩展性差，此时开发人员既写后台又写前端解决：使用ajax异步网络请求Json:存储数据的一种结构组成 {} 表示字典 [] 表示列表：表示键值对 ,分隔两个部分作用用于网络传输代码：urlpatterns = [ url(r'...
复制链接

扫一扫

专栏目录