我正在尝试使用烧瓶在 html 中显示来自 AJAX 调用的值

Question

我对 Web 开发比较陌生。基本上，我正在烧瓶中创建一个应用程序。我现在要做的是测试一个 AJAX 函数，看看它是否工作。AJAX 函数从 html 读取无线电输入。我想在 html 中显示 AJAX 调用，以查看我的代码是否正常工作。这是我的 html 代码（index.html）：<div class="form-check form-check-inline">  <input class="form-check-input" type="radio" name="inlineRadioOptions1" id="option1" value="option1">  <label class="form-check-label" >Yes</label></div><div class="form-check form-check-inline">  <input class="form-check-input" type="radio" name="inlineRadioOptions1" id="option2" value="option2">  <label class="form-check-label">No</label></div><div class="form-check form-check-inline">  <input class="form-check-input" type="radio" name="inlineRadioOptions1" id="option3" value="option3">  <label class="form-check-label">Dunno</label></div>这是我的 AJAX 函数：$(function(){     $('#btnSubmit').click(function(){        var radioValue1 =  $("input[name=inlineRadioOptions1]:checked").val();        $.ajax({                url: '/process',                data: {value1: radioValue1},                type: 'POST',                success: function(response){                    console.log(response);                },                error: function(error){                    console.log(error);            }              });    });});这是我在python中的代码：from flask import Flask, render_template, request, jsonify# App config.DEBUG = Trueapp = Flask(__name__)app.config.from_object(__name__)app.config['SECRET_KEY'] = '7d441f277y7ttt8t88tb'@app.route("/")def index():    return render_template('index.html')@app.route('/process', methods = ['POST'])def process():     v1 = request.form['value1']    return jsonify({'v1': v1})if __name__ == "__main__":    app.run(debug = True)现在我想使用 div 标签在 index.html 中显示值 v1。我怎样才能做到这一点？

Answer 1

首先，您需要在响应中设置标题，text/json以便成功函数将您response作为 json 对象。那么你可以像这样阅读它：

response.v1

要更改 html 值，您可以通过 id 调用元素：

$('#id_v1').text(response.v1)

现在你需要一个容器来显示数据，这样你就可以在你的 html 中添加它：

<input id="id_v1"> or <div id="id_v1"></div>

Answer 2

插入<div id="result"></div>您的index.html并将结果放在成功处理程序中：

        $.ajax({

                url: '/process',

                data: {value1: radioValue1},

                type: 'POST',

                success: function(response){

                    console.log(response);

                    $('#result').text(response.v1);

                },

                error: function(error){

                    console.log(error);

            }      

        });