Я пытаюсь отобразить значение из вызова AJAX в HTML, используя колбу

Question

Привет, ребята. Я относительно новичок в веб-разработке.В основном я создаю приложение в колбе.Сейчас я пытаюсь протестировать функцию AJAX, чтобы убедиться, что она работает.Функция AJAX считывает радиовходы из html.Я хочу отобразить вызов AJAX в html, просто чтобы увидеть, работает ли мой код.

Вот мой 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)

Теперь я хочу отобразить значение v1 в index.html, используя тег div.Как я могу это сделать?

Answer 1

Вставьте <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);
            }      
        });

Answer 2

Сначала вам нужно установить заголовок в ответе как text/json, поэтому функция успеха выдаст вам response как объект json.затем вы можете прочитать это так:

response.v1

чтобы изменить значения html, вы можете вызвать элемент по id:

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

теперь вам нужен контейнер, для которого вы хотите отобразитьданные, чтобы вы могли добавить это в свой HTML:

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