GET 和 POST 方法以及如何使用它们答案

【问题标题】：GET and POST methods and how they should be usedGET 和 POST 方法以及如何使用它们
【发布时间】：2018-08-20 02:13:02
【问题描述】：

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

为什么当我更改传递给 javascript 的变量时，我的网站首页没有更新？每当我发布（即通过搜索框进行提交时，Entries 变量似乎没有更新。我对 javascript 很陌生，所以请温柔一点。;）

下面是代码：

<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'])
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 render_template('index.html', entries = 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)

【问题讨论】：

entries 在 Javascript 文件中是从哪里出现的？
var jsonz = {{ entries|tojson }}; var s = JSON.parse(jsonz);这是我传递它的地方
是的，没关系，我在问，你在 javascript 文件中哪里声明了 entries？
我想我忘了声明它。我对将某些东西传递到前端并不得不声明它感到困惑。你能帮帮我吗？

标签： javascript jquery html post flask

【解决方案1】：

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

1、检查你的 ajax url 是否在你的烧瓶应用中定义，你的烧瓶应用没有定义'/index'，所以请检查你的 api 是否正常工作，像这样

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

2、ajax接收数据但不接收html页面，所以你的flask应该返回数据（即{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

希望对你有帮助！

【讨论】：

我现在明白我的 index.html 中有没有更新的 javascript。我怎样才能让它更新？
你可以在我的回答中看到代码，你的api不返回html页面，它应该返回你需要的数据