S
S
Stas_s2022-01-06 21:23:58
AJAX
Stas_s, 2022-01-06 21:23:58

I can not understand why ajax in flask does not work for me?

I deal with ajax in flask, I have already searched a lot on the Internet, but for some reason it does not work. Purpose: to send the entered data from the user to the flask so that this data is written to the desired value in the dictionary of the json file. But for some reason I can't run ajax. The data is transmitted only through request.form and after clicking "write" the page is restarted, but it should not be restarted with ajax. You also need to pass along with the entered data from the user, the row id number from the table (it is displayed in row[6], in which he enters data. Good people, tell me, first of all, where is the error and what am I doing wrong with ajax and also pls tell me how to pass the id of the row (row[6]) which is also passed from the server from the dataframe (it should not be visible to the user)?
handling sending data to flask

@app.route('/save/', methods=['POST', 'GET'])      # кнопка записи
def save():
    with open('index.txt') as json_file:
        data = json.load(json_file)

    mass = request.form['mass']
    row_id = request.form['row']

    for i in data:
        if i == row_id:
            data[i] = mass
    
    with open('index.txt', 'w') as outfile:
        json.dump(data, outfile)
 
    return render_template('index.html')


ajax save.js file - it is located in the static folder
$(document).ready (function () {
      $("#mass_btn").bind('click', function() {
        $. ajax ({
          url: '/',
          type: "POST",
          data: ({name: $("#mass").val()}),
          dataTape: "html",
          success: function () {
              $("#information").text('записано');
            }

        });
      });
  });


jquery link from google pasted into base.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='save.js') }}"></script>


and also index.html
{% extends "base.html" %}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='save.js') }}"></script>

{% block content %}
    <h1>Авторизация, {{ current_user.username }}!</h1>


<form action="/upload/" method="POST">
    <input type="submit" class="btn btn-dark" value="Загрузить">
</form>

<table cellspacing="2" border="1" cellpadding="5">

    {% for index, row in df %}
    <tr>
        <td>{{ row[0] }}</td>
        <td>{{ row[1] }}</td>
        <td>{{ row[2] }}</td>
        <td>{{ row[3] }}</td>
        <td>{{ row[4] }}</td>
        <td>{{ row[5] }}</td>
        <td> row[6]
            <form action="/save/" method="POST" name="save" id="row" >
            <input id='mass' type="number" name="mass" />
            <input id='mass_btn' type="submit" value="Записать">
            </form>

        </td>
    </tr>
    {% endfor %}
</table>

{% endblock %}

Answer the question

In order to leave comments, you need to log in

1 answer(s)
E
Emil Revencu, 2022-01-06
@Stas_s

<input id='mass_btn' type="submit" value="Записать">

type="submit" reloads your page

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question