Question

我正在通过烧瓶建立一个本地托管的网站，我将用它来抓取craigslist之类的网站。我在获取主索引页面以正确更新时遇到了一些问题。对于这种全栈级开发，我是一个新手。

当我更改要传递到javascript中的变量时，为什么我的网站首页没有更新？每当我发布（即通过搜索框进行提交时，Entries变量似乎都不会更新。我对javascript很陌生，所以请保持柔和。）

下面是代码：

<GridList className={classes.gridList} cols={this.props.width === 'sm' ? 12 : 6}>

这是app.py

<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>

Answer 1

您可以按照以下步骤进行检查

1，检查您的ajax url是在flask应用程序中定义的，而flask应用程序未定义“ / index”，因此请检查您的api是否正常工作

@app.route("/index", methods=['GET', 'POST'])

2，ajax接收数据但不接收html页面，因此您的烧瓶应返回数据（即{text:"xxxx"}），然后您可以使用$("#search-query").text("you search: " + data["text"]);进行更新

@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

希望它可以帮助您！

GET和POST方法以及应如何使用

1 个答案: