如何将数据从 Flask 发送到 JavaScript? [英] How I can send data from Flask to JavaScript?

问题描述

您好，我是新手，正在使用 Flask 和 Javascript 构建应用程序.我从 Flask do JavaScript 发送数据时遇到问题.

Hello I am new and building an application in Flask and Javascript. I have a problem with sending data from Flask do JavaScript.

我在 routes.py 中有代码

I have code in routes.py

@app.route('/mapaa',methods=['GET','POST'])
def mapa():
    user_id = current_user.get_id()
    slownik = {}


    if 'event_form' in request.form:
        name = request.form['name_event']
        all_data = Event.query.filter_by(name=name).all()
        for row in all_data:
            date_st_string = str(row.date_start)
            date_end_string = str(row.date_end)
            slownik = {'id':row.id,'date_st':date_st_string,'date_end':date_end_string,'type':row.type,'name':row.name,'len_route':row.len_route,'route':row.route}
        return jsonify(slownik)
    return render_template('mapaa.html', title='Mapa')

我想用 JavaScript 将 jsonify(slownik) 发送到我的代码，但我不想用 render_template 这样做，因为它会刷新页面，我需要这些数据使用 JavaScript 在地图上显示它.我尝试了 return jsonify(slownik) 但它在新页面上返回了我的数据.当用户单击 event_form 按钮而不刷新页面时如何将数据发送到 JavaScript?

I want to send jsonify(slownik) to my code in JavaScript but I dont want to do it with render_template bacause it refresh a page and I need this data to display it on the map using JavaScript. I tried return jsonify(slownik) but it return me the data on new page. How I can send the data when the user click event_form button to JavaScript without refreshing page?

推荐答案

您可以使用ajax 发送post 请求而无需刷新页面.注意 - 在此之前包含 jquery

You can use ajax for sending post request without refreshing the page. Note- include jquery before this

<script src="https://code.jquery.com/jquery-3.1.0.js" ></script>

javascript 代码

javascript code

$("#id_of_btn").click(function () { // make ajax request on btn click
  $.ajax({
    type: "POST",
    url: "/mapaa", // url to the function
    data: {
      name: $("#id_of_input_tag").val(), // value of the form
    },
    success: function (response) {
      console.log(response); // response contains the json
    },
  });
});

确保你不使用表单标签.

make sure you don't use form tag.

如果您想通过表单发送更多数据，您可以使用

If you want to send more data via forms, you could use

data: $('form').serialize()

这将获取输入标签的名称属性并将其添加到request.data中所以如果你有这个

this will take the name attribute of input tag and add it in the request.data So if you have this

<input type="text" id="element_id" name="username" > 

您可以像这样使用 name 属性的值 request.data['username']按照这个 教程

You can use the value of name attribute like this request.data['username'] follow this tutorial

这篇关于如何将数据从 Flask 发送到 JavaScript?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！