当前位置:首页 > 教育培训 >

html前端怎么传值给后端(后端返回一个html显示给前端)

来源:原点资讯(www.yd166.com)时间:2023-07-09 01:45:31作者:YD166手机阅读>>

输入类型为submit,说明它就是提交按钮,注意上面代码type="submit"了吗?

HTML表单重要属性1. Action属性

在之前的例子中,前端表单需要将数据提交给后端,除了需要一个提交按钮外,还需要action属性。当点击提交按钮后,表单的数据该发到后端的哪个url进行处理,就是定义在action属性中。接下来,我们结合前端和后端直接来个小实战,后端代码用Python的Flask框架。

前端代码:

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>彩虹运维技术栈社区主页</title> </head> <body> <h2>彩虹运维技术栈社区,公众号ID:TtrOpsStack</h2> <h3>主机信息</h3> <form action="http://192.168.11.10:8088/ttropsstack" target="_blank"> <label for="ipaddr">IP地址</label> <input type="text" id="ipaddr" name="ip"><br> <input type="submit" value="提交"> </form> </body> </html>

后端代码:

from flask import Flask, request webapp = Flask(__name__) @webapp.route('/ttropsstack', methods=["GET", "POST"]) def ttropsstack(): args = request.args print 'ip addr is: %s' % args.get('ip') return 'ok' if __name__ == '__main__': webapp.run(host="0.0.0.0", port=8088, debug=True)

前端和后端的代码写完后,我们接下来看看效果

输入IP地址后,点击提交

html前端怎么传值给后端,后端返回一个html显示给前端(5)

这个ok是后端返回的

html前端怎么传值给后端,后端返回一个html显示给前端(6)

后端接收到数据后,啥也没做,只是做了简单打印

html前端怎么传值给后端,后端返回一个html显示给前端(7)

这个小栗子很简单,通过这个小栗子,是不是对action属性的用法有了进一步的理解呢?

2. Method属性

method属性的用途是指定提交数据的http方法,通常有2个,get和post。接下来我们在上个小栗子的基础上做个小改造,看下面代码

前端代码:

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>彩虹运维技术栈社区主页</title> </head> <body> <h2>彩虹运维技术栈社区,公众号ID:TtrOpsStack</h2> <h3>主机信息</h3> <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="get"> <label for="ipaddr">IP地址</label> <input type="text" id="ipaddr" name="ip"><br> <input type="submit" value="提交"> </form> </body> </html>

后端代码:

from flask import Flask, request webapp = Flask(__name__) @webapp.route('/ttropsstack', methods=["POST"]) def ttropsstack(): args = request.args print 'ip addr is: %s' % args.get('ip') return 'ok' if __name__ == '__main__': webapp.run(host="0.0.0.0", port=8088, debug=True)

当前端输入数据后,提交表单时,直接告诉你这是不允许的方法

html前端怎么传值给后端,后端返回一个html显示给前端(8)

栏目热文

html调用后端接口(html里面怎么导入web接口)

html调用后端接口(html里面怎么导入web接口)

专注于Java领域优质技术,欢迎关注作 者:Cherry300来 源:jianshu.com/p/c86cee16b41...

2023-07-09 01:45:13查看全文 >>

橘生淮南戈壁结局(原著暗恋橘生淮南中戈壁结局)

橘生淮南戈壁结局(原著暗恋橘生淮南中戈壁结局)

青春总是最令人懵懂又是最令人向往的时期。现在关于青春校园剧的改编一直都是一大热点,像正在热播的暗恋橘生淮南也是其中一部,...

2023-07-09 01:32:10查看全文 >>

橘生淮南江百丽结局

橘生淮南江百丽结局

《暗恋橘生淮南》江百丽结局:爱戈壁爱得太卑微,最终远走他乡开始新人生 文/呱呱热剧热播剧《暗恋橘生淮南》本周的剧情更新完...

2023-07-09 01:35:12查看全文 >>

橘生淮南电视剧是谁拍的(橘生淮南电视剧哪里播)

橘生淮南电视剧是谁拍的(橘生淮南电视剧哪里播)

《暗恋橘生淮南》终于开播,“振华三部曲”终于凑齐了。《暗恋橘生淮南》从开拍以来就备受关注,毕竟这是唯一一部由原著作者八月...

2023-07-09 01:59:46查看全文 >>

橘生淮南电影上映了吗(橘生淮南电影在哪演)

橘生淮南电影上映了吗(橘生淮南电影在哪演)

5月15日,新片《暗恋·橘生淮南》宣布因疫情撤档520,电影将延期上映,新档期尚未确定。此前,《可不可以不要离开我》、《...

2023-07-09 02:03:04查看全文 >>

html获取后台数据库(html调用数据库数据最简单方法)

html获取后台数据库(html调用数据库数据最简单方法)

大家常见的网站数据转移(数据迁移)通常是一种同样的cms之间。但是,如果网站换了CMS,后台数据库类型和数据表结构都不一...

2023-07-09 01:59:53查看全文 >>

怎么获取本地html页面的数据(html获取后台实时数据)

怎么获取本地html页面的数据(html获取后台实时数据)

不要使用sed、awk、grep等工具进行尝试(这会导致不可预期的结果)。在许多情况下,你最好选择使用支持XML数据的编...

2023-07-09 01:24:09查看全文 >>

html获取实时数据(html如何获取另一个html数据)

html获取实时数据(html如何获取另一个html数据)

在本Pandas教程中,我们将详细介绍如何使用Pandas read_HTML方法从HTML中获取数据。首先,在最简单的...

2023-07-09 01:57:34查看全文 >>

html代码中怎么获取后端传递参数

html代码中怎么获取后端传递参数

提到axaj很多人总说很难,什么回调函数呀等等就让人心烦,其实懂得ajax在js里面是如何实现向服务器请求数据的原理,那...

2023-07-09 02:10:51查看全文 >>

html发送数据给后端(html数据传到后端)

html发送数据给后端(html数据传到后端)

在电商网站搭建过程中,前端经常会向后端请求数据,有时候通过HTML、JS和PHP文件的处理来实现数据的连通。通常情况下,...

2023-07-09 02:07:00查看全文 >>

文档排行