子沐课堂——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

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

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

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

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

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

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

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

目录结构如图所示。

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

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

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

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

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

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

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

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

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

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

引入jsonify返回json串

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

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

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

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

index.html中增加代码

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

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

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

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

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

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

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

视频加载中...

相关推荐