持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第23天，点击查看活动详情

第一部分：JSON简介

```html

```

效果展示：

第二部分：前后交互

1.此处介绍前后交互的两种方式：

（1）利用form表单里的name属性进行前后端交互

One：

小提示： import tornado.web 查看其源码：26-38行为tornado版本的hello world，拿过来改改就好了~

HTML代码：

```python

用户名：
密 码：

```

Python代码：

```python import tornado.web

import tornado.ioloop import tornado.web

class MainHandler(tornado.web.RequestHandler): def get(self): self.render("Ajax_form.html")

def post(self, *args, **kwargs):        #此处的用post还是get取决于HTML文件中form表单的method属性（二者一样）
    #通过打印在控制台进行查看，有没有成功从前端拿到信息
    print(self.get_argument("user"))    #.get_argument()拿到的是单个的参数，参数是form表单里name属性的属性值。
    print(self.get_argument("pwd"))
    self.write("提交成功！")

if name == "main": application = tornado.web.Application([ (r"/", MainHandler), #需要和form表单里的action一致。 ]) application.listen(8888)
tornado.ioloop.IOLoop.current().start() ```

拓展： 如果报错：NotImplementedError 看本文：权限问题， 评论区沟通。

如何实现：

首先：运行.py文件 无报错后，运行HTML文件 然后将前端界面的地址栏改为：127.0.0.1：8888并回车 无报错即为转发成功 最后输入用户名和密码，并点击提交按钮，即可在pycharm控制台显示用户名和密码。

效果展示：

（2）利用AJAX进行前后端交互

1. Ajax功能？ 利用form表单进行前后端交互（传统交互模式）在提交时会进行整个页面的刷新； 而利用AJAX则是进行异步加载，可以在不重载整个页面的前提下进行局部刷新。

2. 什么是Ajax？ 全称 Ansync JavaScript and XML，是一门异步的加载技术，局部刷新。

3. Ajax怎么用？ Ajax的使用分为原生和jq（Jquery）两种。原生的不咋用看，所以下面就讲下JQ的。

（1）JQ版本的Ajax：

python代码：

```python import tornado.web

import tornado.ioloop import tornado.web

class MainHandler(tornado.web.RequestHandler): def get(self): self.render("ajax_jquery.html")

def post(self, *args, **kwargs):
    aaa = int(self.get_argument("aa"))
    bbb = int(self.get_argument("bb"))
    c = aaa + bbb
    # 将后台处理过后的前端的数据回显到前端
    return_data = {"result":c}             #将需要传输的数据构造成JSON对象
    self.write(return_data)                #将后台需要传递给前端的数据回显给前端

if name == "main": application = tornado.web.Application([ (r"/", MainHandler), ]) application.listen(8880)
tornado.ioloop.IOLoop.current().start() ```

如果报上面说的报错，就加入以下代码：

```python

windows 系统下 tornado 使用 SelectorEventLoop

import platform

if platform.system() == "Windows": import asyncio

asyncio.set_event_loop_policy(asyncio.WindowsSelectorEventLoopPolicy())

```

HTML代码：

```python

AJAX + JQUERY 实现前后交互

+ = 计算

```

粗略讲下同步异步：

同步：向服务器发送请求之后，需要等待服务器响应结束完毕，才能发送第二个请求。如果没有等待服务器响应结束就发送别的请求，会出现卡顿现象。 异步：向服务器发送请求之后，可以直接发送别的请求，它们之间没有任何干扰。可以实现局部刷新。

效果展示：

🔆In The End！

👑有关于Me

个人简介：我是一个硬件出身的计算机爱好者，喜欢program，源于热爱，乐于分享技术与所见所闻所感所得。文章涉及Python，C，单片机，HTML/CSS/JavaScript及算法，数据结构等。

| 从现在做起，坚持下去，一天进步一小点，不久的将来，你会感谢曾经努力的你！ | | ------------------------------------ |

认真仔细看完本文的小伙伴们，可以点赞收藏并评论出你们的读后感。并可关注本博主，在今后的日子里阅读更多技术文哦~

如有错误或者言语不恰当的地方可在评论区指出，谢谢！\ 如转载此文请联系我征得本人同意，并标注出处及本博主名，谢谢 ！