流程 :

　　 render 只能识别 字符串,对于其他的css,html,js,jquery样式是不能识别的,它会将文件中的内容解析称为字符串拿到前端页面,浏览器进行渲染.

例如 :

# 视图函数

def index(request):

    if request.is_ajax():

        return HttpResponse("成功了呢!")

    name = 'fily'

    return render(request,"index.html",{"name":name})
<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="/static/js/jquery-3.3.1.min.js"></script>

</head>

<body>

<div class="c1">全局首页:{{ name }}</div>

{% load cal %}

{{ n1|mul:13 }}

<button class="c2">Ajax</button>

<div id="i1" user="{{ name }}"></div>

<script>

   $(".c1").click(function () {

       $(this).css("color","red")

   });

   $(".c2").click(function () {

       $.ajax({

           url:"",

           type:"get",

           data:{

               name:"1"

           },

           success:function (res) {

               alert(res)

           }

       })

   })

</script>

</body>

</html>

　　实现效果 : 点击全局首页---变红    点击ajax按钮---将1传递到视图函数中,页面显示.

需求   :

想点击ajax之后,name=fily的fily传到后端做一个校验(校验不用了,传过去就行.)

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="/static/js/jquery-3.3.1.min.js"></script>

</head>

<body>

<div class="c1">全局首页:{{ name }}</div>

{% load cal %}

{{ n1|mul:13 }}

<button class="c2">Ajax</button>

<div id="i1" user="{{ name }}"></div>

<script>

   $(".c1").click(function () {

       $(this).css("color","red")

   });

   $(".c2").click(function () {

       $.ajax({

           url:"",

           type:"get",

           data:{

               name:"{{ name }}"

           },

           success:function (res) {

               alert(res)

           }

       })

   })

</script>

</body>

</html>

注意 : 在html中,我们在jQuery中,name:'{{ name }}' 一定要加 ' ' .否则后面的name就是一个变量.(因为' ' 里面的是字符串,render只能识别字符串)

render 的执行流程 : 对于render来说,它会找到对应的html文件,但是它对html,css,js,jquery 是不识别的,唯一识别的就是 字符串 ,它会将 index.htnl文件解析成字符串,在这些字符串中只有  {{ }} 和 {% %}  这些模板语法会被响应的替换. 拿整个模板的字符串交给浏览器进行渲染(浏览器是可以识别html,css等).

render 的执行流程的更多相关文章

  1. ThinkPHP 框架执行流程分析

    总体来说,应用的流程涉及到几个文件:Index.phpThinkPHP.phpThink.class.phpApp.class.phpDispatcher.class.phpThinkPHP/Mode ...

  2. 一、restful规范 二、CBV(View)源代码执行流程 三、drf框架安装和简单使用

    一.restful规范 ''' 它是一个规范,面向资源架构 十条规范 1.API与用户的通讯协议,总是使用HTTPs协议,确保了网络传输的安全性 2.域名 --https://api.example. ...

  3. {Django基础九之中间件} 一 前戏 二 中间件介绍 三 自定义中间件 四 中间件的执行流程 五 中间件版登陆认证

    Django基础九之中间件 本节目录 一 前戏 二 中间件介绍 三 自定义中间件 四 中间件的执行流程 五 中间件版登陆认证 六 xxx 七 xxx 八 xxx 一 前戏 我们在前面的课程中已经学会了 ...

  4. yii 执行流程

    应用执行流程: 浏览器向服务器发送 Http Request | 控制器(protected/controllers) | |---> Action | 创建模型 (Model) | 检查$_P ...

  5. django Rest Framework----APIView 执行流程 APIView 源码分析

    在django—CBV源码分析中,我们是分析的from django.views import View下的执行流程,这篇博客我们介绍django Rest Framework下的APIView的源码 ...

  6. Django 基于类的视图(CBV)执行流程 CBV 源码分析

    一.CBV(基于类的视图) 视图是可以调用的,它接受请求并返回响应,这不仅仅是一个函数,Django提供了一些可以用作视图的类的例子,这些允许您通过继承或mixin来构建视图并重用代码. 基本示例 D ...

  7. yii执行流程

    yii执行流程 原文:http://www.cnblogs.com/bluecobra/archive/2011/11/30/2269207.html 一 目录文件 |-framework     框 ...

  8. 一文读懂Spring MVC执行流程

    说到Spring MVC执行流程,网上有很多这方面的文章介绍,但是都不太详细,作为一个初学者去读会有许多不理解的地方,今天这篇文章记录一下我学习Spring MVC的心得体会 话不多说,先上图:   ...

  9. 通过自己实现接口来加深理解SpringMVC的执行流程

    功能介绍 上篇文章[从源码角度了解SpringMVC的执行流程]通过接口源码向大家介绍了SpringMVC的执行流程,主要偏重于源码.这篇文件我们来自己实现那几个关键接口,来真实体验下SpringMV ...

随机推荐

  1. Mac搭建python环境

    1 安装xcode 2 安装 brew ruby-e"$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/mast ...

  2. EasyMvc入门教程-高级控件说明（16）信息框控件

    网页开发的时候,会经常向用户显示一些信息,比如执行结果,注意事项等,下面展示一种最简单的信息提示: 代码如下: @Html.Q().Msg().Text("初始化信息").Auto ...

  3. 窗体皮肤实现 - 增加Toolbar的交互性

    稍微改造一下,让交互性更好点.增加提示和动态效果. 控件实现内容: 1.加入Hint提示 2.加入了简易动画效果,鼠标进入和离开会有个渐变效果. 实现方案: 1.基类选用 2.Action的关联 3. ...

  4. python 制作wordcloud词云

    pip install wordcloud 需要用到numpy  pillow matplotlib 安装完成以后 wordcloud_cli --text in.txt --imagefile ou ...

  5. 又一次遇到Data truncation: Data too longData truncation: Data too long问题

    往MySQL的blob字段上传文件,结果又出现了Data truncation: Data too longData truncation: Data too long异常. 我的第一反应是查看/et ...

  6. ZF-net

    ZF-net 摘要: 1.这篇文章的motivation 是 :CNN性能良好,可是我们不知道它为何性能良好.也不知道它怎么能够被提高? 2.本文介绍了一种新方法实现中间层和分类器的可视化 3.採用消 ...

  7. VueJS字符串反转:String.reverse()

    HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  8. Lua学习八----------Lua运算符

    © 版权声明:本文为博主原创文章,转载请注明出处 1.Lua运算符: - 算术运算符:+(加法).-(减法).*(乘法)./(除法-取整).%(除法-取余).^(乘幂).-(负号) - 关系运算符:= ...

  9. 封装CLLocationManager定位获取经纬度

    创建调用方法,在.h文件里 #import <Foundation/Foundation.h> @interface RMMapLocation : NSObject { void (^s ...

  10. 一个简单的HTML5摇一摇实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...