我正在尝试使用烧瓶在 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 = True

app = 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&nbsp;id="id_v1">&nbsp;or&nbsp;<div&nbsp;id="id_v1"></div>

Answer 2

插入<div id="result"></div>您的index.html并将结果放在成功处理程序中：&nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: '/process',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {value1: radioValue1},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'POST',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function(response){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(response);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#result').text(response.v1);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: function(error){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(error);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; });