Html 前端jinjia2 & ajax

本章内容：

　　jinja2

　　Ajax中的if语句

参考文档

　　html可以参照学习：w3school

　　bootstrap学习：bootstrap

　　综合类学习网站：runoob

　　jinja2学习网站：jinjia2

　　各种网站图标：小图标

JINJA2

jinjia是组成Flask模块的引擎，先看下怎么导入吧

from flask import render_template

模板的使用，我们需要预先准备一个HTML文档，这个HTML文档不是普通的HTML，而是嵌入了一些变量和指令，然后根据我们传入的数据，替换后，得到最终的html，发送给客户

Flask通过render_template()函数来实现模板的渲染。和Web框架类似，Python的模板也有很多种。Flask默认支持的模板是jinja2

再理清下：

这些所谓的模板，就是在原本单一的HTML 基础之上做了许多便于开发的事情。比如逻辑判断，比如运算，比如过滤器。当然了，还有比较重要的数据绑定。数据绑定的功能得到的结果就是写页面，相似的页面仅需提供一个“模板”，相应的地方丢进去需要的数据即可，此处的“模板”是一个可以理解为数据容器，相当于商场柜台，商场本身已经提供了展示柜，即为此处“模板”，而里面需要展示的东西即为值。这也就使得一个网站 “动态” 化了

小丽：

AJAX

AJAX 不是新的编程语言，而是一种使用现有标准的新方法

是一种用于创建快速动态页面的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

 传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。
 ajax学习教程：runoob

1.后端的数据怎么传给前端

1、flask的render_template同步渲染

后端渲染页面的时候传递数据，前端用特殊的语法，比如 {{变量}}

优点：开发简单，直接jinjia2语法渲染，后端渲染，性能呢个比较好

缺点：更新数据需要刷新整个页面，体验差

2、ajax 异步更新

render_template 没有变量，或只有少数变量

还有一个数据结构，通过js获取数据，渲染页面

优点：异步获取数据，局部更新页面体验好

缺点：首屏比较慢

2、前端的数据，怎么给后端

1、form 表单直接跳转

同步提交

2、ajax

异步提交，用户无感知。

这里插一嘴，课堂上又问起http中get与post的区别了，小总结一下：

GET，一般用于查询/获取资源信息

POST, 一般用于更新资源信息

GET参数通过URL传递，POST放在Request body中

GET请求在URL中传送的参数是有长度限制的(2k)，而POST么有

这些不是标准的答案？

HTTP的底层是TCP/IP。所以GET和POST的底层也是TCP/IP，也就是说，GET/POST都是TCP链接。GET和POST

能做的事情是一样一样的。你要给GET加上request body，给POST带上url参数，技术上是完全行的通的。

感觉标准答案，要看道行的深浅了，

对于运维来说回答如下感觉就不错了：

对于web开发的同学，那得深入了：涉及到底层，参考下吧：

http://www.tuicool.com/articles/faAJNzR

ajax的语法：

$.get(获取数据的的地址，function(前面地址的返回值)){

执行函数

}

小丽：

运行效果：点击button 就回去调用/getajaxdata的数据。

在绑定事件(click)这里有个坑

在点击删除按钮，删除某个用户的时候

---->加载js---->绑定click---->发送ajax请求---->返回请求---->删除按钮渲染进了页面

这时候事件已经绑定了，但是按钮是后出来的，所以在点击的时候，是不会有效果的

这时候写法需要更换一下

$(选择器).on('click',function(){
    xxxx
})

需要更换为下面这种写法：

$(document).on('click',选择器,function(){
    xxxx
})

表单中点击删除按钮，删除用户的ajax语法

　　首先delete的button键的代码处理方式：

<span data-user="{{u[0]}}" class="deluser-btn glyphicon glyphicon-trash" aria-hidden="true"></span>

　　通过class去出发时间

　　data-user 手机每行的用户名

　　ajax收集data开头的属性时，可以用两个函数来获取

　　 data-user

　　 1.$(this).data('user')

　　 2.$(this).attr('data-user')

　　具体实现代码如下：

ajax 中函数的使用

function getUser(){
$.get('/usertemp',function(data){ #获取usertemp页面下的数据
$('#user-table').html(data) #使user-table的这个表展示这个数据
})
}

　　函数的调用就是直接 getUser()

排错的手法：

console.log( $(this).data('user') ) 这用在浏览器的console里面就会看到输出的信息了

这里写完了回有一个问题，就是表单输入完之后，下次输入还有东西。

表单清除的方法

首先给表单设置一个id

然后对这个表单进行属性设置

　　上面讲述的都是用的get的方法。那post方法如何操作呢？

首先flast 中配置要接受post方法

　　然后

图中有两种实现post的方法。

第二种方法，传递的就是一个字典。

Ajax中的if语句

　　if( .....){

......

}else{

......

}

　　建议：后端传递给前端最好是一个字典的方式data = {状态码：，error_message: , data: }

然后前端再通过JSON.parse()转换为对象的方式，可以直接用data.状态码、 data.error_message 、 data.data 去处理数据

Ajax中获取select框中的id，修改时显示它的值

　　在修改表单数据的时候，会弹出一个模态框，这个模态框中有select，那如何选择这个select中的值呢？如下图所示把这个值放到bid中

　　然后ajax中

　　var bid = $('.edit').parent().parent().attr('bid') 就可以获取到bid的值了，然后再在编辑是的select中做显示

$('#edit_form').find('select').var(bid)

　　这样当编辑对话框出来后select显示的就是对应的值了。