Question

我遇到的问题是页面未呈现。它只是返回默认的index.html而不是response.html

我已经在后端使用python和在前端使用javascript / jquery / ajax创建了flask应用程序。但是，每当我尝试在模板中返回视图时，都不会出错（无论是在控制台中还是在cmd窗口中），并且页面也不会呈现。任何帮助，将不胜感激。这是代码：

这是index.html

<!DOCTYPE html>
<html>

<head>
    <title>Local Sales Scraper</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="parse_data" method="POST">
      <input id ="textbox" name="textbox" type="text" placeholder="Search..">

    </form>
  </div>
  <form class = "form2" action="parse_data" method="POST">
  <h3> Price Range </h3>
  <input id ="start" name="start" type="number" placeholder="Start..">
  <input id ="end" name="end" type="number" placeholder="End..">
  <input type="checkbox" id="sort"> sort lowest to highest price<br>
  <button type="submit">submit</button>
</form>
</br>
  <input type="checkbox" id="Ebay" value="Ebay" class="chk"> Search Ebay<br>
  <input type="checkbox" id="Craigslist" value="Craigslist" class="chk"> Search Craigslist<br>
  <input type="checkbox" id="Letgo" value="Letgo" class="chk"> Search Letgo<br>

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


<script>



//alert(value);
$("button").click(function (e) {

  //alert(checkedIds.join(", "));
    //alert("button clicked and checked");
    e.preventDefault();
    var sorted = $("#sort").val();
    var search = $("#textbox").val();
    var startPrice = $('#start').val();
    var endPrice = $('#end').val();
    //alert(sorted);
    $.ajax({
      type: 'POST',
      url: "parse_data",
      data: JSON.stringify({"search" : search, "startPrice" : startPrice, "endPrice" : endPrice, "sorted" : sorted}),
      contentType: 'application/json; charset=utf-8',
      success: function(data){


        //alert(JSON.parse(data));

      }
    });

});




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

这是response.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 id="div1">
  <p id="p1"></p>
  <p id="p2"></p>
  </div>


  <script>
var s = {{ data|tojson }};
var s = JSON.parse(jsonz);

var i;
for (i = 0; i < s.length; i++) {
  var header = document.createElement("h2");
  var para = document.createElement("p");
  var a = document.createElement('a');

  var linkText = document.createTextNode("here is the link to the item");
  a.href = s[i].product_link;
  var price = document.createTextNode(s[i].product_price);
  var node = document.createTextNode(s[i].product_name);
  para.appendChild(node);
  a.appendChild(linkText);
  header.appendChild(price);

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



//  a.title = "title";




  }
  </script>
</body>

和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():

    data = request.get_json()

    #print data


    #search = json.loads(search)
    scrapedData = json.dumps(scrape(data))
    #entries = jsonify({'name' : entries})
    #print scrapedData

    return render_template('index.html', data= scrapedData)




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

Answer 1

您尝试访问的未呈现的路线是什么？我已经看到您的模板和索引路由出现问题。在HTML模板中，您尝试解析var s = {{ data|tojson }};，但是在索引路由中，render_template不会返回数据。另外，您正在尝试解析JSON.parse(jsonz)，但是我看不到代码中任何地方定义的jsonz。另外，您的index.html不符合HTML结构。就像您在一个页面中放置2个HTML页面一样。

每页只能有一个<html>标签，每页只能有一个<head>标签，每页只能有一个<body>标签。每个页面都有2个，这就是页面无法呈现的原因

更新

之所以这样做，是因为您没有在代码中呈现response.html。您正在呈现index.html

您的parse_data()应该呈现response.html，而不是 index.html

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

    data = request.get_json()

    #print data


    #search = json.loads(search)
    scrapedData = json.dumps(scrape(data))
    #entries = jsonify({'name' : entries})
    #print scrapedData

    return render_template('response.html', data= scrapedData)

更新＃2

单击按钮进行Ajax调用时，您正在向parse_data()发送请求并等待响应。您不能期望parse_data()呈现任何html，因为它应该将响应返回给您的ajax调用。在您的情况下，它将以字符串形式返回整个html 作为对ajax调用的响应，并且由于请求是使用ajax发出的，因此不会呈现您期望的模板。如果您对要达到的目标更加具体，我可以尝试为您提供示例代码。

未获得任何错误，但我的烧瓶应用程序中的页面未使用render_template呈现

1 个答案: