html与python后端交互,python后端中取表单

86 篇文章 3 订阅

参考:http://www.manongjc.com/detail/13-owqqwhqvsqworkh.html

前端:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>测试表单</title>
</head>

<body>
  <form action="http://localhost:8080/get/sum" target="_blank" method="POST">
    名字 : <input type="text" name="mname" value="myname"><br>
    年龄 :<input type="number" name="mage" value="833"><br>
    密码:<input type="password" name="mpassword" value="1314"><br>
    性别: 男<input type="radio" name="sex" value="male" checked="checked"> 女<input type="radio" name="sex"
      value="female"><br>

    内容:<textarea name="mcontent">input you are a good boy.你好啊</textarea>
    提交表单:<input type="submit" value="提交">
  </form>
</body>

</html>

python服务器

# coding=utf-8
from flask import Flask, request, jsonify
import urllib

app = Flask(__name__)


@app.route("/get/sum", methods=["GET", "POST"])
def get_sum():
    data = request.get_data()
    print("header {}".format(request.headers))
    print("data = ", data)

    text = data.decode("utf-8")
    sp = text.split("&")
    print("text = {}".format(text))

    print(urllib.parse.unquote(text, encoding="utf-8"))

    i = 0
    kv = {}
    for s in sp:
        print("{} s = {}".format(i, s))
        pp = s.split("=")
        if (len(pp) == 2):
            value = pp[1]
            kv[pp[0]] = value
            print(urllib.parse.unquote(value, encoding="utf-8"))

    print("kv {}".format(kv))
    info = {}
    info['name'] = "中文"
    info["age"] = 8928
    return jsonify(info)


if __name__ == "__main__":
    app.config["JSON_AS_ASCII"] = False
    app.run(host="127.0.0.1", port=8080)

 

结果:

点击“提交”按钮后结果(显示中文结果):

{"age":8928,"name":"中文"}

python服务器第二版,获取表单值

# coding=utf-8
from flask import Flask, request, jsonify
import urllib

app = Flask(__name__)


@app.route("/get/sum", methods=["GET", "POST"])
def get_sum():
    print("header {}".format(request.headers))
    print("args ", request.args)
    print("form {}".format(request.form.to_dict()))
    for k, v in request.form.to_dict().items():
        print("k = ", k, ", v = ", v)

    info = {}
    info['name'] = "中文"
    info["age"] = 8928
    return jsonify(info)


if __name__ == "__main__":
    app.config["JSON_AS_ASCII"] = False
    app.run(host="127.0.0.1", port=8080)

结果:

header Host: localhost:8080
Connection: keep-alive
Content-Length: 116
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
Origin: null
Content-Type: application/x-www-form-urlencoded
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.102 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: navigate
Sec-Fetch-User: ?1
Sec-Fetch-Dest: document
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9


args  ImmutableMultiDict([])
form {'mname': 'myname', 'mage': '833', 'mpassword': '1314', 'sex': 'male', 'mcontent': 'input++= you are a good boy.你好啊'}
k =  mname , v =  myname
k =  mage , v =  833
k =  mpassword , v =  1314
k =  sex , v =  male
k =  mcontent , v =  input++= you are a good boy.你好啊
127.0.0.1 - - [15/Sep/2020 21:19:50] "POST /get/sum HTTP/1.1" 200 -

 

  • 15
    点赞
  • 127
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
HTML 是一种用于创建 Web 页面的标记语言,主要用于呈现静态内容。要与后端交互,必须使用服务器端编程语言(如 PHP、Python、Java 等)和相应的 Web 框架来实现。 HTML后端交互的主要方式有以下两种: 1. 表单提交 HTML 表单可以通过 POST 或 GET 方法将数据提交到服务器。表单的 `action` 属性指定了提交数据的 URL 地址,`method` 属性指定了提交数据的方式。服务器端接收到提交的数据后,可以解析数据,并做出相应的响应。 以下是一个简单的 HTML 表单示例: ```html <!DOCTYPE html> <html> <head> <title>Form Example</title> </head> <body> <h2>Form Example</h2> <form action="/submit" method="post"> <div> <label for="name">Name:</label> <input type="text" id="name" name="name"> </div> <div> <input type="submit" value="Submit"> </div> </form> </body> </html> ``` 上述代码中,表单的 `action` 属性为 `/submit`,`method` 属性为 POST。当用户单击提交按钮时,表单数据将被提交到服务器上的 `/submit` URL。 2. Ajax 请求 使用 Ajax 技术可以在不刷新页面的情况下向后端发送请求并获取响应。在页面中使用 JavaScript,调用 Ajax 函数向服务器端发送请求,并在获取到响应后对页面内容进行更新。 以下是一个简单的 Ajax 请求示例: ```html <!DOCTYPE html> <html> <head> <title>Ajax Example</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { $('#submit').click(function() { $.ajax({ url: '/submit', type: 'POST', data: $('form').serialize(), success: function(response) { $('#result').html(response); } }); }); }); </script> </head> <body> <h2>Ajax Example</h2> <form> <div> <label for="name">Name:</label> <input type="text" id="name" name="name"> </div> <div> <input type="button" id="submit" value="Submit"> </div> </form> <div id="result"></div> </body> </html> ``` 上述代码使用 jQuery 库实现了一个 Ajax 请求。当用户单击提交按钮时,JavaScript 调用 `$.ajax` 函数向服务器发送 POST 请求,并在获取到响应后将响应内容更新到页面上的 `#result` 元素中。 总的来说,HTML后端交互的方式主要包括表单提交和 Ajax 请求。在使用这些方式时,需要使用服务器端编程语言和相应的 Web 框架来处理请求和响应。
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值