3.1.5 Python简单网站实践3

怼烎@ 2022-05-27 14:07 158阅读 0赞

5， **数据传输**

在建立了前端表单之后，就要实现前端和后端之间的数据传递。在工程当中最常用的是Ajax()

Ajax是“Asynchronous Javascript and XML”（异步JavaScript和XML）的缩写；jQuery，里面就有Ajax()方法，能够让程序员方便地调用。

Ajax()方法通过HTTP请求加载远程数据。

该方法是jQuery底层AJAX实现。简单易用的高层实现如$.get、$.post等。$.ajax()返回其创建的XMLHttpRequest对象。

了解Ajax()，必须得了解一个重要的术语——“ 异步”，与之相对应的叫作“ 同步”

“ 同步模式”就是上一段的模式，后一个任务等待前一个任务结束，然后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的；

“ 异步模式”则完全不同，每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。

在浏览器端，耗时很长的操作都应该 异步执行，避免浏览器失去响应，最好的例子就是Ajax操作。在服务器端，“ 异步模式”甚至是唯一的模式，因为执行环境是单线程的，如果允许同步执行所有http请求，服务器性能会急剧下降，很快就会失去响应。

用Ajax()方法实现前后端的数据传输，需要修改script.js文件：

$(document).ready(function()\{

$("\#login").click(function()\{

var user = $("\#username").val();//获取用户名

var pwd = $("\#password").val();//获取密码

var da = \{"username":user, "password":pwd\};//把得到值放到json对象中

$.ajax(\{

type:"post",

url:"/",

data:da,

cache:false,

success:function(data)\{

alert(data);

\},

error:function()\{

alert("error!");

\},

\});

用Ajax()方法将json对象传给后端。

jQuery中的Ajax()方法使用只需要$.ajax()即可：

type：是post还是get。

url：post或者get的地址。

data：传输的数据，包括三种，（1）html拼接的字符串；（2）json数据；（3）form表单经serialize()序列化的。本例中传输的就是json数据，这也是经常用到的一种方式。

cache：默认为True，如果不允许缓存，设置为False。

success：请求成功时执行回调函数。本例中，将返回的data用alert方式弹出来。读者是否注意到，我在很多地方都用了alert()这个东西，目的在于调试，走一步看一步，看看得到的数据是否是自己所要。

error：请求失败所执行的函数。

6， **数据处理**

前端通过Ajax技术，将数据以json格式传给了后端，并且指明了对象目录"/"，这个目录在url.py文件中已经做了配置，是由handlers目录中index.py文件的IndexHandler类来处理。因为是用post方法传的数据，那么在这个类中就要有post方法来接收数据。所以，要在 IndexHandler类中增加post()，增加之后的完善代码是：

\#!/usr/bin/env python

\# coding=utf-8

'''

Created on 2018年4月19日

'''

import tornado.web

class IndexHandler(tornado.web.RequestHandler):

def get(self):

self.render("index.html")

def  post (self):

userName = self. get\_argument ("username")

passWord = self. get\_argument ("password")

self.write(userName) \#后端向前端返回数据

在 post()方法中，使用 get\_argument()函数来接收前端传过来的数据，这个函数的完整格式是get\_argument（name，default=\[\]，strip=True），它能够获取name的值。name就是从前端传到后端的那个json对象的键的名字，是哪个键就获取哪个键的值。

特别注意，在get的时候，通过get\_argument()函数获得url的参数，如果是多个参数，就获取最后一个的值。要想获取多个值，可以使用get\_arguments（name，strip=True）。

查看效果：先停止网站（ctrl+c），再重新执行python server.py运行网站，然后刷新浏览器即可或者访问。

我这边启动的时候报错：

![20180420102434870][]

这是端口被占用，打开任务管理器，删除所有python进程，或者是改端口，重启机器都行。

正确效果：

![20180420102501434][]

前端输入了用户名和密码之后，单击login按钮，提交给后端，后端再向前端返回数据之后的效果。

下面要做的事情就是验证这个用户名和密码是否合法，其体现在：

数据库中是否有这个用户。

密码和用户先前设定的密码（已经保存在数据库中）是否匹配。

验证工作完成之后，才能允许用户登录，登录之后才能继续做接下来的事情。

首先，在methods目录中（已经有了一个db.py）创建一个文件，我将其命名为 readdb.py，专门用来存储读数据用的函数（也可以都写到db.py中）。这个文件的代码如下：

\#!/usr/bin/env python

\# coding=utf-8

'''

Created on 2018年4月20日

'''

from db import \*

def select\_tab(table, column, condition, value):

sql = "select " + column + " from " + table + " where " + condition + "=" + value

cur.execute(sql)

lines = cur.fetchall()

return lines

进一步改写 index.py中的post()方法：

\#!/usr/bin/env python

\# coding=utf-8

'''

Created on 2018年4月19日

'''

import tornado.web

import methods.readdb as mr

class IndexHandler(tornado.web.RequestHandler):

def get(self):

self.render("index.html")

def post(self):

userName = self.get\_argument("username")

passWord = self.get\_argument("password")

user\_infos =  mr.select\_tab (table="users",column="\*",condition="name", value="'"+userName+"'")

if user\_infos:

db\_wd = user\_infos\[0\]\[2\]

if db\_wd == passWord:

self.write("Welcome you :"+userName)

else:

self.write("your password was not right.")

else:

self.write("There is no this user.")

一定注意，在methods目录中，只有不缺少 \_\_init\_\_.py文件，才能在index.py中实现import methods.readdb as mr。

![20180420102520765][]

![20180420102527927][]

过程中报错发现几个问题， user\_infos =  mr.select\_tab (table="users",column="\*",condition="name",  value="'"+userName+"'" )这句标红色的部分注意了，一定要拼接好字符串

上述演示中，数据库中的用户密码并没有加密，这不是真实的开发行为，在真实的开发中，一定要加密传输。

[20180420102434870]: /images/20220527/abcd595c82664300a95a3d891ebdd819.png
[20180420102501434]: /images/20220527/42d8007ff71642ce974b7b7b7c4c70e7.png
[20180420102520765]: /images/20220527/201b7ecae7124c32a9f461aebf2b3f21.png
[20180420102527927]: /images/20220527/59e847795e6442b381a8d72bfbdc5637.png