子沐课堂——Flask小帅锅勾搭Ajax萌妹纸

Flask小帅锅

为什么我们使用Flask呢？他有什么闪光点呢？现在听我慢慢道来

Flask是一个使用 Python 编写的轻量级 Web 应用框架。其 WSGI 工具箱采用 Werkzeug ，模板引擎则使用 Jinja2 。不要看他小，但是他其实也是应了一句话，叫做“麻雀虽小五脏俱全”。

Flask保留了扩增的弹性，可以用Flask-extension加入这些功能：ORM、窗体验证工具、文件上传、各种开放式身份验证技术。

说了这么多，我们发现Flask虽然会的不多，但是延展性很好。这位小帅锅也能独挡一面的。

Ajax萌妹纸

为什么说Ajax是一个萌妹纸呢？

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。

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

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

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

Aajx很早就出现了，但是在js中Ajax处理很繁琐，今天我们来谈谈如何使用Jquery操作Ajax。

开始勾搭

首先我们要建立一个Flask入口文件，以便我们之后对于页面的访问，还有操作，新建一个python文件，保存为index.py

接下来，我们要设置默认访问的页面哦，怎么搞呢？

好了，我们设置好了。使用@app.route('/')设置了默认访问的路由，也使用render_template方法设置了访问index.html。

既然要访问index.html，那么我们就来写一写这个页面，首先我们新建两个文件夹，分别是templates和static。

templates为模板文件夹，即html文件存放地址。

static为静态文件夹，即存放js，css，img的文件夹

目录结构如图所示。

然后呢？我们在templates中新建一个html，取名为index.html

script中引入了两个文件，这个两个文件，分别存放在如下图所示的路径下。

其中jquery-1.12.0.min.js是一个jquery文件，这个任意版本其实都可以，因为Ajax对于版本要求不高。

index.js是我们自定义的一个文件，里面放上的就是我们请求Ajax的一些操作。

Id选择器的点击事件，获取输入框中的两个值，这里使用到表单选择器，然后我们使用ajax进行表单的提交，使用get形式提交数据到ajax_get处理方法里。

引入jsonify返回json串

接收前端传递过来的get数据，使用requests.args。get方法去获取对应的属性值，如果不存在该属性，则设置默认值0，并且限定前台传递过来的是一个int类型的数值。

我们都知道，我们一般使用ajax提交的都是表单数据，不会使用get形式去提交，一般都使用post提交数据。那么flask中怎么接受post数据呢？

index.html中增加代码

其中beforeSend表示在提交前，做的处理。

中间我们加上一个sleep机制，为何这么做，为了体现前台表单提交数据过程中等待的过程。

接受前台post数据使用request.form。

如此，对于Flask处理get和post的ajax请求，并返回json数据格式的处理。到这里就讲完了。是不是挺容易的。

这个也是为何我们使用Flask小帅锅的原因，轻而便捷。Django这种大胖子，虽然力量强，但是太笨重。

相关资料，请加群获取:586656942