Корректна ли моя функция вызова AJAX для удаления строки таблицы?

ProgramBox

Корректна ли моя функция вызова AJAX для удаления строки таблицы?

Post author:admin
Запись опубликована:13 ноября, 2022
Post category:Вопросы по программированию

#javascript #html #flask

#javascript #HTML #flask

Вопрос:

У меня возникли проблемы с пониманием того, почему моя кнопка «Удалить» не работает должным образом. Я работаю над веб-страницей. Короче говоря, главная страница содержит таблицу, строки которой добавляются с помощью пользовательского ввода, некоторых запросов к базе данных SQL и Flask. Я хочу иметь возможность удалять строки без обновления страницы, поэтому я получил некоторую помощь в создании AJAX-вызова, чтобы сделать именно это. Это часть, предназначенная для обработки этого действия:

 $("#button").clicked(function() {
var rowsToRemove = [];
$(".checkitem:checked").each(function() {
  var rowIndex = $(this).parent("tr").index(this);
  rowsToRemove.push(rowIndex 1);
});

delete_ajax = $.ajax({
        type : 'POST',
        method: 'POST',
        url : "/home",
        data : JSON.stringify({rowsToRemove:rowsToRemove, typeofpost: 'delete'}),
        dataType: "json",
        contentType: "application/json"
});

delete_ajax.done(function(responseObject, textStatus, jqXHR) {
    if(responseObject.status == 200) {
      reloadTable();
    }
});

delete_ajax.error(function() {
  alert("Unable to delete row(s). Please try again.");
});

});

И вот та часть, с которой мне помогли со стороны Flask, которая будет различать вызовы удаления и опубликованные данные:

 if request.json.get('type') == 'add':
        if not request.form.get("password"):
            return apology("'Password' field required. Please enter a symbol.", 403)
        if not request.form.get("website"):
            return apology("'Website' field required. Please enter a share.", 403)

        password=request.form.get("password")

        db.execute("INSERT INTO passwords (user_id, password, cipher, website) VALUES (:userID, :password, :cipher, :website)",
                    userID=session["user_id"],
                    password=password,
                    cipher=encrypt(password),
                    website=request.form.get("website"))

        length = db.execute("SELECT COUNT(password) FROM passwords WHERE user_id = :userID", userID=session["user_id"])#.fetchone()[0]

        db.execute("UPDATE passwords SET row_id = :rowID WHERE user_id = :userID AND password = :pw",
                    rowID=length[0]["COUNT(password)"],
                    userID=session["user_id"],
                    pw=password)

        #return redirect("/home")
        return {"status":200}

    # from delete
    if request.json.get('type') == 'delete':
        length = db.execute("SELECT COUNT(password) FROM passwords WHERE user_id=:userID", userID=session["user_id"]).fetchone()[0]

        index = list(range(1, length 1))

        data_to_delete = request.json.get("data")

        rowsToRemove = db.execute("DELETE FROM passwords WHERE row_id IN :data AND user_id:=userID", data=data_to_delete, userID=session["user_id"])

        db.execute("UPDATE passwords SET row_id=:rowID WHERE user_id=:userID", rowID=index, userID=session["user_id"])

        return {"status":200}

На всякий случай, если мне нужно исправить что-то, что я упустил из виду на стороне HTML, я это тоже сделаю:

 <div class="form-group container">
    <table class="table table-hover thead-dark">
        <thead>
            <th><div class="checkbox">
                    <label><input type="checkbox" class="checkbox" id="checkall" name="checkall"> Select/Deselect All</label>
                </div></th>
            <th>Row</th>
            <th>Password</th>
            <th>Cipher</th>
            <th>Website</th>
        </thead>
        <tbody>
            {% for row in rows %}
                <tr>
                    <td><div class="checkbox">
                        <input type="checkbox" class="checkitem">
                    </div></td>
                    <td>{{row["row_id"]}}</td>
                    <td>{{row["password"]}}</td>
                    <td>{{row["cipher"]}}</td>
                    <td>{{row["website"]}}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
    <div class="form-group form-inline container center row">
        <form  action="/home" method="/post">
            <input class="form-control" autocomplete="off" name="password" placeholder="Password" type="text" required>
            <input autocomplete="off" class="form-control" name="website" placeholder="Website" type="text" required>
            <input class="btn btn-primary" type="submit" id="encrypt" value="Encrypt">
        </form>
        <button type="button" class="btn btn-outline-danger" style="margin: auto" id="button">Remove</button>
    </div>

У меня есть привычка пропускать вещи, поэтому, если я чего-то не понимаю, пожалуйста, дайте мне знать a.s.a.p.

1.В $.ajax() … 1) type является псевдонимом method , поэтому нет необходимости иметь оба варианта. Это работает в любом случае… Но просто для упоминания. 2) в передаваемых вами данных это a typeofpost: 'delete' … А на стороне сервера все выглядит так, как вы ожидаете request.json.get('type') . ЭТО может быть важно. 😉 — Помимо этого, ...is not working as intended совершенно неясно.

2. @LouysPatriceBessette Я не совсем понимаю, что вы имеете в виду во втором комментарии. Должно ли это быть request.json.get('delete') вместо этого? Что не работает должным образом, так это тот факт, что моя кнопка удаления не удаляет строки, как я ожидаю. Кроме того, я хотел посмотреть, как я могу отправлять данные из форм непосредственно на страницу.

3. Нет… Так и должно быть resquest.json.get('typeofpost') . Вы должны использовать key , чтобы получить значение.

Ответ №1:

Если вы разделите функцию, ее будет легко отлаживать. Я привел здесь пример, у меня есть таблица под названием account . Я создал различные функции для выполнения операций CRUD

 from flask import Flask, jsonify, request, render_template
import sqlite3
app = Flask(__name__)

con = sqlite3.connect("sql.db", check_same_thread=False)
con.row_factory = sqlite3.Row
cur = con.cursor()
    
@app.route('/account', methods=['GET'])
def get_account():
    args = [] 
    where = ''
    if request.args:
        for i in request.args:
            args.append(i   ' = "'   request.args[i] '"')
        where = ' WHERE ' ' and '.join(args)
    cur.execute('SELECT * FROM account{}'.format(where))
    data = [dict(i) for i in cur.fetchall()]
    return jsonify({'data':data})

@app.route('/account', methods=['POST'])
def post_account():
    acc = request.form['acc']
    cur.execute("INSERT INTO account (account) VALUES ('{}')".format(acc))
    con.commit()
    a = cur.lastrowid
    cur.execute('SELECT * FROM account WHERE id = {}'.format(a))
    data = cur.fetchone()
    return jsonify(data)

@app.route('/account', methods=['PUT'])
def put_account():
    data = request.form
    cur.execute("UPDATE account set account = '{}' WHERE id = {}".format(data['acc'], data['id']))
    con.commit()
    cur.execute('SELECT * FROM account WHERE id = {}'.format(data['id']))
    data = cur.fetchall()
    return jsonify(data)

@app.route('/account', methods=['DELETE'])
def dalete_account():
    data = request.form
    cur.execute("DELETE from account  WHERE id = {}".format(data['id']))
    con.commit()
    return jsonify({'status': 'Deleted Successfully', 'deleted_id': data['id']})

Схема таблицы

 CREATE TABLE IF NOT EXISTS account(
id integer PRIMARY KEY,
account text)

А » АЯКС «,

 <!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <marquee behavior="" direction="">Press F12 and See the console.</marquee>
ID: <input type="number" id="id" ><br>
Acc: <input type="text" id="acc"><br>
<button onclick="post()">Post: Add Acc and Submit</button>
<button onclick="put()">Put: Add ID and acc and Submit</button>
<button onclick="del()">Delete: Add ID and Submit</button>
<div id="result"></div>
<script>
    function post() {
        dic = {'acc': document.getElementById('acc').value}
        $.ajax({
            type: "POST",
            url: '/account',
            data: dic,
            success: function(data){
                console.log(data)
                $('input').val('')
            }
        })
    }
    function put() {
        dic = {'id': document.getElementById('id').value, 'acc': document.getElementById('acc').value}
        $.ajax({
            type: "PUT",
            url: '/account',
            data: dic,
            success: function(data){
                console.log(data)
                $('input').val('')
            }
        })
    }
    function del() {
        dic = {'id': document.getElementById('id').value}
        $.ajax({
            type: "DELETE",
            url: '/account',
            data: dic,
            success: function(data){
                console.log(data)
                $('input').val('')
            }
        })
    }
</script>

</body>
</html>

Возможно, вам потребуется добавить несколько вещей в AJAX, и это уже есть в вашем коде,

ContentType (по умолчанию: ‘application /x-www-form-urlencoded; charset = UTF-8’) Тип: Логическое значение или Строка

При отправке данных на сервер используйте этот тип контента. По умолчанию используется «application /x-www-form-urlencoded; charset= UTF-8», что подходит для большинства случаев. Если вы явно передаете тип содержимого в $.ajax() , то он всегда отправляется на сервер (даже если данные не отправляются).

Тип данных (по умолчанию: интеллектуальное предположение (xml, json, script или html)) Тип: Строка

Функция, которая будет использоваться для обработки необработанных данных ответа XMLHttpRequest. Это функция предварительной фильтрации для очистки ответа. Вы должны вернуть очищенные данные. Функция принимает два аргумента: Необработанные данные, возвращаемые с сервера, и параметр ‘DataType’.