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

Posted

技术标签:

【中文标题】简单的烧瓶应用服务器使用 ajax 和 jquery 传递数据【英文标题】:simple flask app server passing data with ajax and jquery 【发布时间】:2019-01-25 13:10:30 【问题描述】:

我整天都在修补这个应用程序,试图将一些简单的信息传递到应用程序的后端。我正在使用一个简单的烧瓶应用程序并尝试使用 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>

【问题讨论】:

【参考方案1】:

您的代码 sn-p 有一些问题,主要是:

您的 AJAX 请求未绑定到按钮单击事件,因此单击按钮不会执行任何操作。 您有两个 html 元素具有相同的 id textbox,id 应该是唯一的。 要通过 id 获取 html 元素,请使用 "#textbox"

在服务器端(Flask):

使用请求的函数get_json() 要处理POST 请求,您需要检查POST 而不是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));
        
    );

);

同时删除重复的 id textbox,将表单的 id 更改为 textbox-form,最后将您的 parse_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").click 表示选择按钮对象并将函数添加为回调,因为您只有一个按钮对象,如果您有多个按钮对象,它仅适用于该对象必须使用更具体的选择器,指向像 $("#mybutton") 这样的 id 或类。 感谢您提供的信息。我可以再问一个吗?我似乎无法在模板上呈现搜索。换句话说:当我使用搜索查询发布时,没有任何内容返回到模板并按我想要的方式显示。有什么想法吗?

以上是关于简单的烧瓶应用服务器使用 ajax 和 jquery 传递数据的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 jquery ajax 正确地将 json 对象传递给烧瓶服务器

如何在烧瓶中获取 AJAX 发布的 JSON? [复制]

ajax基础学习

如何在烧瓶中使用多个Mongodb

烧瓶用户认证

JQuer的简单应用