Javascript 在Flask应用程序中将变量从后端传递到前端_Javascript_Python_Jquery_Ajax_Flask

Javascript 在Flask应用程序中将变量从后端传递到前端

javascript python jquery ajax flask

Javascript 在Flask应用程序中将变量从后端传递到前端,javascript,python,jquery,ajax,flask,Javascript,Python,Jquery,Ajax,Flask,基本上，我希望下面的代码将“搜索”从后端放到前端我很难让我的flask应用程序使用模板和简单的flask结构将数据从后端传递到前端我愿意接受关于更好方法的建议。到目前为止，@danielmesejo对我学习Flask和ajax/jquery也有很大帮助这是我的app.py from scraper import scrape from flask import Flask, render_template, jsonify, make_response, request import js

基本上，我希望下面的代码将“搜索”从后端放到前端

我很难让我的flask应用程序使用模板和简单的flask结构将数据从后端传递到前端

我愿意接受关于更好方法的建议。到目前为止，@danielmesejo对我学习Flask和ajax/jquery也有很大帮助

这是我的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():

    entries = json.dumps(scrape("video games"))
    return render_template('index.html', entries= entries)

@app.route('/parse_data', methods=['GET', 'POST'])
def parse_data():
    if request.method == "POST":
        #data = request.form("blah")
        #print("blah")
        search = request.get_json()
        #new_search = json.dumps(scrape(data))
        return jsonify(search)
    return render_template('index.html')

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

这是我的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="" method="POST">
      <input id ="textbox" name="textbox" type="text" placeholder="Search..">
      <button type="submit">submit</button>
    </form>
  </div>

  <p>you searched: {{search}} </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){
        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);
}




//document.getElementById("user").innerHTML =
//obj;
//"Name: " + obj.product_name + "<br>" +
//"Location: " + obj.product_link;
</script>



</body>
</html>


烧瓶应用程序
提交
您搜索：{{search}


var值=$（'.textbox'）.val（）；
//警报（值）；
$（“按钮”）。单击（功能（e）{
e、 预防默认值（）；
var值=$（“#文本框”）.val（）；
警报（值）；
$.ajax({
键入：“POST”，
url:“解析_数据”，
数据：JSON.stringify（{“text”：value}），
contentType:'application/json；charset=utf-8'，
成功：功能（数据）{
警报（JSON.stringify（数据））；
}
});
});
var jsonz={{entries | tojson}}；
var s=JSON.parse（jsonz）；
var i；
对于（i=0；i”+
//“位置：”+obj.product_链接；

要实现您的愿望，只需更改传递给

success

的函数，如下所示：

success: function (data) {
                $("#search-query").text("you search: " + data["text"]);
            }

并将

元素更改为您搜索的

：

要了解有关Flask和web开发的更多信息，我建议您阅读Flask Mega教程。

希望您继续关注。我有一个相对简单的问题。如何将传递到后端的json返回到python对象中，以便处理它？我尝试了json.parse、json.load和json.dump。似乎什么都不管用（request.get_json（），返回一个json对象。