Python 使用ajax和jquery传递数据的简单flask应用服务器_Python_Jquery_Html_Ajax_Flask

Python 使用ajax和jquery传递数据的简单flask应用服务器

python jquery html ajax flask

Python 使用ajax和jquery传递数据的简单flask应用服务器,python,jquery,html,ajax,flask,Python,Jquery,Html,Ajax,Flask,我花了一整天的时间修补这个应用程序，试图将一些简单的信息传递到应用程序的后端。我正在使用一个简单的flask应用程序，并尝试使用ajax将数据从搜索查询发送到后端。然而，我却完全失败了。任何帮助都将不胜感激下面是app.py from scraper import scrape from flask import Flask, render_template, jsonify, make_response, request import json app = Flask(__name__)

我花了一整天的时间修补这个应用程序，试图将一些简单的信息传递到应用程序的后端。我正在使用一个简单的flask应用程序，并尝试使用ajax将数据从搜索查询发送到后端。然而，我却完全失败了。任何帮助都将不胜感激

下面是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():

    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 == "GET":
        #data = request.form("blah")
        #print("blah")
        search = request.json
        #new_search = json.dumps(scrape(data))
        return 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 name = "textbox" id = "textbox">
      <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);
$.ajax({
  type: 'POST',
  url: "/parse_data",
  data: JSON.stringify(value)
  contentType: 'application/json',
  success: function(data){
    alert("success")
  }
});



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（）；
//警报（值）；
$.ajax({
键入：“POST”，
url:“/parse_data”，
数据：JSON.stringify（值）
contentType:'应用程序/json'，
成功：功能（数据）{
警惕（“成功”）
}
});
var jsonz={{entries | tojson}}；
var s=JSON.parse（jsonz）；
var i；
对于（i=0；i”+
//“位置：”+obj.product_链接；

您的代码片段存在一些问题，主要是：

您的AJAX请求没有绑定到按钮单击事件，因此单击按钮没有任何作用
您有两个id相同的html元素
```
textbox
```
，id应该是唯一的
要按id获取html元素，请使用
```
“#textbox”
```

在服务器端（烧瓶）：

使用请求的函数
```
get_json（）
```
要处理
```
POST
```
请求，您需要检查
```
POST
```
not
```
GET
```

尝试按以下方式包装您的POST请求：

$("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",
        dataType: "json",
        success: function (data) {
            alert(JSON.stringify(data));
        }
    });

});

@app.route('/parse_data', methods=['GET', 'POST'])
def parse_data():
    if request.method == 'POST':
        search = request.get_json()
        return jsonify(search)
    return render_template('index.html')

还要删除重复的id

textbox

，将表单的id更改为类似于

textbox表单的id

，最后将

parse_data

函数更改为类似以下内容：

$("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",
        dataType: "json",
        success: function (data) {
            alert(JSON.stringify(data));
        }
    });

});

@app.route('/parse_data', methods=['GET', 'POST'])
def parse_data():
    if request.method == 'POST':
        search = request.get_json()
        return jsonify(search)
    return render_template('index.html')

我把密码改成了你的密码。现在可以了。你能解释一下我做错了什么吗？Masejo非常感谢，我真的很感激。@Daniel Mesejo最后一个问题：它如何知道我单击了什么按钮？$（“按钮”）。单击意味着选择按钮对象并添加函数作为回调，由于您只有一个button对象，因此它仅适用于该对象。如果您有多个button对象，则必须使用更具体的选择器，指向id或类，如$（“#mybutton”）。感谢您提供的信息。我能再问一个吗？我似乎无法在模板上获得要渲染的搜索。换句话说：当我发布一个搜索查询时，没有任何内容返回到模板中，并且显示出我想要的内容。有什么想法吗？