python前端与后端的数据交互_前端与后端的数据交互(jquery ajax+python flask)

前端与后端的数据交互,最常用的就是GET、POST,比较常用的用法是:提交表单数据到后端,后端返回json前端的数据发送与接收1)提交表单数据2)提交JSON数据后端的数据接收与响应1)接收GET请求数据2)接收POST请求数据3)响应请求前端的数据发送与接收1. 提交表单数据# GET请求var data = {"name": "test","age": 1};$.ajax({type: 'GE...
摘要由CSDN通过智能技术生成

前端与后端的数据交互,最常用的就是GET、POST,比较常用的用法是:提交表单数据到后端,后端返回json

前端的数据发送与接收

1)提交表单数据

2)提交JSON数据

后端的数据接收与响应

1)接收GET请求数据

2)接收POST请求数据

3)响应请求

前端的数据发送与接收

1. 提交表单数据

# GET请求

var data = {

"name": "test",

"age": 1

};

$.ajax({

type: 'GET',

url: /your/url/,

data: data, # 最终会被转化为查询字符串跟在url后面: /your/url/?name=test&age=1

dataType: 'json', # 注意:这里是指希望服务端返回json格式的数据

success: function(data) { # 这里的data就是json格式的数据

},

error: function(xhr, type) {

}

});

# POST请求

var data = {}

# 如果页面并没有表单,只是input框,请求也只是发送这些值,那么可以直接获取放到data中

data['name'] = $('#name').val()

# 如果页面有表单,那么可以利用jquery的se

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是HTML前端Python后端资料交互的基本流程: 1. HTML前端页面发送请求到Python后端服务器。 2. Python后端服务器接收请求并解析请求参数。 3. Python后端服务器处理请求并生成响应数据。 4. Python后端服务器将响应数据返回给HTML前端页面。 5. HTML前端页面接收响应数据并根据数据更新页面内容。 实现这一流程的具体方法可以有多种,以下是其中一种基本实现方式: 1. 在HTML前端页面中使用JavaScript发起AJAX请求到Python后端服务器。 2. 在Python后端服务器中使用Flask等Web框架接收AJAX请求,并根据请求参数进行相应的处理和生成响应数据。 3. 在Python后端服务器中使用JSON格式将响应数据返回给HTML前端页面。 4. 在HTML前端页面中使用JavaScript接收响应数据,并根据数据动态更新页面内容。 具体代码实现可以参考以下示例: HTML前端页面代码: ```html <!DOCTYPE html> <html> <head> <title>HTML与Python数据交互示例</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(function(){ $("#submit-btn").click(function(){ var data = { "name": $("#name-input").val(), "age": $("#age-input").val(), "gender": $("#gender-select").val() }; $.ajax({ url: "/submit", type: "POST", data: JSON.stringify(data), contentType: "application/json", success: function(resp){ $("#result-div").text(resp["message"]); } }); }); }); </script> </head> <body> <h1>HTML与Python数据交互示例</h1> <p>请输入您的个人信息:</p> <label>姓名:</label> <input type="text" id="name-input"><br> <label>年龄:</label> <input type="number" id="age-input"><br> <label>性别:</label> <select id="gender-select"> <option value="male">男</option> <option value="female">女</option> </select><br> <button id="submit-btn">提交</button> <div id="result-div"></div> </body> </html> ``` Python后端服务器代码: ```python from flask import Flask, request, jsonify app = Flask(__name__) @app.route("/submit", methods=["POST"]) def submit(): data = request.get_json() name = data.get("name") age = data.get("age") gender = data.get("gender") message = "您好,{},您的个人信息已提交成功!您的年龄是{}岁,性别是{}。".format(name, age, gender) return jsonify({"message": message}) if __name__ == "__main__": app.run(debug=True) ``` 这个示例程序展示了一个简单的HTML页面,用户可以在页面中输入姓名、年龄和性别,并点击“提交”按钮提交这些信息。 当用户点击“提交”按钮时,页面会使用JavaScript发起一个POST请求到Python后端服务器的“/submit”路由。请求数据是一个JSON对象,包括用户输入的姓名、年龄和性别。 Python后端服务器接收到请求后,从请求数据中解析出用户输入的姓名、年龄和性别,然后生成一个响应数据,包括用户输入的信息和一个固定的问候语。响应数据以JSON格式返回给HTML前端页面。 HTML前端页面接收到响应数据后,使用JavaScript将问候语显示在页面上,告诉用户信息已成功提交。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值