Question

我是Web开发的新手。目前，我在Python中使用Flask。因此，基本上，我想使用ajax从html页面中提取值，并将该值显示在我的html页面中的某个区域上。

我有以下html代码（index.html）...

<div class="container">
    <br></br>
    <div id="s1" class="section">
    <table align="center" class="data">
    <tr><th>&nbsp;</th>
      <th>Disease</th>
      <th>No Disease</th>
    </tr>
    <tr>
      <th>Postive Test</th>
      <td>True +ve: <input type="text" class="form-control" name="TP" id="TP" value="20"  style="text-align:center" placeholder="Enter true positive value."/></td> 
      <td>False +ve: <input type="text" class="form-control" name="FP" id="FP" value="7"  style="text-align:center" placeholder="Enter false positive value."/></td>
    </tr>
    <tr>
      <th>Negative Test</th>
      <td>False -ve: <input type="text" class="form-control" name="FN" id="FN" value="6" style="text-align:center" placeholder="Enter false negative value."/></td>
      <td>True -ve: <input type="text" class="form-control" name="TN" id="TN" value="5" style="text-align:center" placeholder="Enter true negative value."/></td>
    </tr>
    </table>
    <td><button type="submit" class="btn btn-default">Compute</button></td>

    </div>

</div>

我还有ajax函数，可以提取值...

$(document).ready(function() {
     $('form').on('submit', function(event) {
       $.ajax({
          data : {
             truePos : $('#TP').val(),
             falsePos : $('#FP').val(),
             falseNeg : $('#FN').val(),
             trueNeg : $('#TN').val(),
                 },
             type : 'POST',
             url : '/process'
            })
        .done(function(data) {
          $('#output').text(data.truePositive).show();
      });
      event.preventDefault();
      });
});

这是处理从ajax提取的数据的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'] = '7d441f27d441f27567d441f2b6176a'


@app.route("/")
def index():
    return render_template('index.html')

@app.route('/process', methods = ['POST'])
def process():
    truePositive = request.form['TP']
    out = eval(truePositive)

    return jsonify({'truePositive': out})

if __name__ == "__main__":
    app.run(debug = True)

现在，我想在html页面的某个部分中显示一个值，所以我这样做...

<div id="output" class="alert alert-success" role="alert" style="display:none;"></div>

当我运行应用程序并单击“提交”按钮时，我会转到另一页http://localhost:5000/process?TP=20&FP=7&FN=6&TN=5

但是，我希望该值显示在div标签中。任何帮助将不胜感激。

谢谢。

Answer 1

<!doctype html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      $('#submit').click(function (event) {
        $.ajax({
          data: {
            truePos: $('#TP').val(),
            falsePos: $('#FP').val(),
            falseNeg: $('#FN').val(),
            trueNeg: $('#TN').val(),
          },
          type: 'POST',
          url: '/process'
        })
          .done(function (data) {
            console.log(data);
            $('#output').text(data.truePositive);
          });
      });
    });
  </script>
</head>

<body>
  <div class="container">
    <br></br>
    <div id="s1" class="section">
      <table align="center" class="data">
        <tr>
          <th>&nbsp;</th>
          <th>Disease</th>
          <th>No Disease</th>
        </tr>
        <tr>
          <th>Postive Test</th>
          <td>True +ve: <input type="text" class="form-control" name="TP" id="TP" value="20" style="text-align:center"
              placeholder="Enter true positive value." /></td>
          <td>False +ve: <input type="text" class="form-control" name="FP" id="FP" value="7" style="text-align:center"
              placeholder="Enter false positive value." /></td>
        </tr>
        <tr>
          <th>Negative Test</th>
          <td>False -ve: <input type="text" class="form-control" name="FN" id="FN" value="6" style="text-align:center"
              placeholder="Enter false negative value." /></td>
          <td>True -ve: <input type="text" class="form-control" name="TN" id="TN" value="5" style="text-align:center"
              placeholder="Enter true negative value." /></td>
        </tr>
      </table>
      <td><button id="submit" class="btn btn-default">Compute</button></td>

      <div id="output"></div>
    </div>

  </div>
</body>

</html>

更新的内容：
1.将带有ID的按钮代替type submit，添加了onclick监听器

   <button id="submit" class="btn btn-default">Compute</button>
   $('#submit').click(function (event) { ... } );

插入<div id="output"></div>
为$('#output').text(data.truePositive);

如何在index.html页面上显示获得的ajax价值

1 个答案: