ajax之异步渲染

点击老师 用ajax渲染老师的学生

这是展示效果

#  视图函数展示所有老师
def show_t(request):
    data=models.Teacher.objects.all()
    return render(request,'san/five.html',locals())	

#  视图函数 用来渲染学生
def show_s(request,id_):
    data=models.Teacher.objects.all()
#  查询模板页面 传来的当前老师的id 
   teacher=models.Teacher.objects.filter(id=id_)
# 将结果集转换成json  前提 结果集必须是可迭代的 
from django.core import serializers
   var=serializers.serialize('json',teacher,ensure_ascii=False)  
#  将查询结果返回给ajax
   return HttpResponse(var)

	#  接下来是模板页面
    <p><h1>所有老师</h1></p>
	# 循环取出 每个老师名称 
  {% for i in data %}
    <button id="{{i.id}}" >   {{i.name}}  </button>
    {% endfor %}

	#  定义一个p标签 用来ajax渲染数据
	<p id="content">


	#   ajax代码

	<script>

    $(document).ready(function(){
	#   给老师button按钮 添加点击事件
        $('button').click(function(){
	#   当点击老师名称 获取老师当前id
            var id = this.id
            $.ajax({
	#  将id传给视图函数
                url:'/wu/show_s/' + id + '/',            
	#   指定get请求   
                type:'get',
	#  如果成功获取到视图函数返回的数据
                success:function(result){
	#  就将获取到的json数据解析
                    val = JSON.parse(result)
	#  定义一个变量 等于空字符串
                    var str = ""
	#  循环取出数据
                    for (let index = 0; index < val.length; index++) {
	#  取出每个name值 并加上换行  赋值给str
                        str += "姓名：" + val[index]['fields']['name'] + "<br>"
                        str += "年龄：" + val[index]['fields']['age'] + '<br>'
                        str += '<hr>'
                    }
	#  将 取出的内容 渲染到 上面的p标签内
                    $('#content').html(str)
                }
            })
        })
    })

	script

当点击老师一号 效果如下

往期推荐

爬虫学习之selenium

django框架学习之分页

机器学习之绘图