Question

我目前正在制作Flask应用。每当我进行发布请求时，我都无法更新javascript。它只是保持不变。这是我关注的代码，应该在我发出发布请求时更新：

var jsonz = {{ entries|tojson }};
var s = JSON.parse(jsonz);

var i;
for (i = 0; i < s.length; i++) {
  var para = document.createElement("p");
  var node = document.createTextNode(s[i].product_name + "\n" + s[i].product_link);
  para.appendChild(node);

  var element = document.getElementById("div1");
  element.appendChild(para);

我对javascript非常陌生。我想从后端传递“条目”，然后将json显示在index.html中。

请有人帮忙。

这是index.html的完整代码

<!DOCTYPE html>
<html>

<head>
    <title>Flask app</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

  </head>
<body>

  <div class="topnav">
    <a class="active" href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
    <form class = "form" action="/index" method="POST">
      <input id ="textbox" name="textbox" type="text" placeholder="Search..">
      <button type="submit">submit</button>
    </form>
  </div>

  <p id="search-query"> you searched: </p>

  <div id="div1">
  <p id="p1"></p>
  <p id="p2"></p>
  </div>

<script>

var value = $('.textbox').val();
//alert(value);
$("button").click(function (e) {
    e.preventDefault();
    var value = $("#textbox").val();
    //alert(value);
    $.ajax({
      type: 'POST',
      url: "index",
      data: JSON.stringify({"text" : value}),
      contentType: 'application/json; charset=utf-8',
      success: function(data){
        $("#search-query").text("you search: " + data["text"]);
          //alert(JSON.stringify(data));

      }
    });
});

var jsonz = {{ entries|tojson }};
var s = JSON.parse(jsonz);

var i;
for (i = 0; i < s.length; i++) {
  var para = document.createElement("p");
  var node = document.createTextNode(s[i].product_name + "\n" + s[i].product_link);
  para.appendChild(node);

  var element = document.getElementById("div1");
  element.appendChild(para);
  }


</script>
</body>
</html>

这是app.py

from scraper import scrape
from flask import Flask, render_template, jsonify, make_response, request
import json
app = Flask(__name__)

@app.route("/", methods=['GET', 'POST'])
@app.route("/index", methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        search = request.get_json()

        search = json.dumps(search)
        search = json.loads(search)
        search = search['text']
        print search
        #search = json.loads(search)
        entries = json.dumps(scrape(search))
        return entries

    elif request.method == "GET":


        entries = json.dumps(scrape("cars"))
        return render_template('index.html', entries= entries)
    else:
        return render_template('index.html')



if __name__ == "__main__":
    app.run(debug=True, host='0.0.0.0', port=5000)

同样，我希望将以“条目”形式抓取的数据传递到前端并显示在html中。

感谢您的帮助！

我最终要得到的工作

<!DOCTYPE html>
<html>

<head>
    <title>Flask app</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

  </head>
<body>

  <div class="topnav">
    <a class="active" href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
    <form class = "form" action="/index" method="POST">
      <input id ="textbox" name="textbox" type="text" placeholder="Search..">
      <button type="submit">submit</button>
    </form>
  </div>

  <p id="search-query"> search results: </p>

  <div id="div1">
  <p id="p1"></p>
  <p id="p2"></p>
  </div>

<script>

var value = $('.textbox').val();
//alert(value);
$("button").click(function (e) {
    e.preventDefault();
    var value = $("#textbox").val();
    alert(value);
    $.ajax({
      type: 'POST',
      url: "parse_data",
      data: JSON.stringify({"text" : value}),
      contentType: 'application/json; charset=utf-8',
      success: function(data){
        $("p#search-query").append(data.data);

        alert(JSON.parse(data));

      }
    });
});




</script>
</body>
</html>

和app.py

from scraper import scrape
from flask import Flask, render_template, jsonify, make_response, request
import json
app = Flask(__name__)

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


@app.route("/parse_data", methods=['POST'])
def parse_data():

    search = request.get_json()

    search = json.dumps(search)
    search = json.loads(search)
    search = search['text']
    print search
    #search = json.loads(search)
    entries = json.dumps(scrape(search))
    #entries = jsonify({'name' : entries})
    return jsonify({'data' : render_template('response.html', entries= entries)})




if __name__ == "__main__":
    app.run(debug=True, host='0.0.0.0', port=5000)

如何更新index.html文件中的javascript？

0 个答案: