Как реализовать динамическое добавление записей с помощью AJAX, чтобы избежать их дублирования?

Как можно предотвратить дублирование записей при повторном добавлении через форму в окне, в то время как динамический вывод блоков в коде add.php должен оставаться доступным? Кроме того, как скрыть часть кода в add.php от AJAX-запросов, чтобы избежать множества добавлений записей? 

Вот код с AJAX:
<pre><code class="javascript">$("#modal").submit(function (e) { 
    e.preventDefault();
     var form_data = $(this).serialize();
     $.ajax({
         type: "POST", 
         url: "user/add.php", 
         data: form_data,
         success: function (html) {
             
             document.getElementById("shadow").style.display = "none";
             document.getElementById("modal").style.display = "none";
             $('#modal'). trigger('reset');
             $("#main").html(html);
         }
     });
 });</code></pre>

Код add.php:
<pre><code class="php">//
 &lt;?php 
require "../database/Task.php";
$task_mess = new Task;
$task_mess = $task_mess -&gt; add_task($_POST['title'], $_POST['description']);
?&gt;
//
&lt;?php 
    $tasks = new Task;
    $tasks = $tasks-&gt;get_tasks(NULL, NULL);
...
  //здесь вывод блоков</code></pre>
  • 17 сентября 2024 г. 11:53
Ответы на вопрос 2
Чтобы реализовать динамическое добавление записей через AJAX с предотвращением дублирования, а также скрыть часть кода на сервере от AJAX-запросов, вы можете воспользоваться следующими рекомендациями:

### 1. Проверка дублирования записей

Перед добавлением новой записи в базу данных проводите проверку на дублирование. Это можно сделать на стороне сервера в файле `add.php`. Например, вы можете выполнить запрос к базе данных и проверить, существует ли запись с такими же значениями, как у добавляемой. Вот упрощённый пример, как это может выглядеть:

```php
<?php 
require "../database/Task.php";
$task_mess = new Task;

// Проверяем на дублирование
$title = $_POST['title'];
$description = $_POST['description'];

if ($task_mess->task_exists($title, $description)) {
    echo json_encode(['status' => 'error', 'message' => 'Запись уже существует']);
    exit;
}

// Добавляем запись
$task_mess->add_task($title, $description);
$tasks = $task_mess->get_tasks(NULL, NULL);

// Здесь вывод блоков...
?>
```

### 2. Метод `task_exists`

Реализуйте метод `task_exists` в классе `Task`, который будет проверять наличие существующей записи:

```php
public function task_exists($title, $description) {
    // SQL-запрос для проверки существования записи
    $stmt = $this->conn->prepare("SELECT COUNT(*) FROM tasks WHERE title = ? AND description = ?");
    $stmt->bind_param("ss", $title, $description);
    $stmt->execute();
    $stmt->bind_result($count);
    $stmt->fetch();
    return $count > 0;
}
```

### 3. Обработка ответа в AJAX

Измените ваш AJAX запрос, чтобы обрабатывать ответ от сервера. Если установка флага "error", выводите сообщение или что-то другое:

```javascript
$("#modal").submit(function (e) { 
    e.preventDefault();
    var form_data = $(this).serialize();
    $.ajax({
        type: "POST", 
        url: "user/add.php", 
        data: form_data,
        dataType: "json", // Убедитесь, что ответ в формате JSON
        success: function (response) {
            if (response.status === 'error') {
                alert(response.message); // Показываем сообщение об ошибке
                return; // Выход из функции
            }

            // Обработайте успешное добавление
            document.getElementById("shadow").style.display = "none";
            document.getElementById("modal").style.display = "none";
            $('#modal').trigger('reset');
            $("#main").html(response.html); // Предполагается, что вы вернули HTML
        }
    });
});
```

### 4. Защита файла `add.php`

Если вы хотите избежать выполнения кода в `add.php`, чтобы он не вызывался напрямую, вы можете добавить проверку, откуда пришел запрос:

```php
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
    http_response_code(403);
    exit('Доступ запрещен');
}
```

Эта проверка позволит выполнять код в `add.php` только в случае POST-запросов, отказываясь выполнять его для GET-запросов.

### Итог

Следуя данным шагам, вы превратите вашу систему в более защищённое решение, предотвращающее дублирование записей при добавлении через AJAX.
1. Используй метод .off() для удаления предыдущих обработчиков событий перед добавлением нового. 
2. Исправь код AJAX, чтобы ограничить количество перерисовок элементов.

$("#modal").off('submit').on('submit', function (e) { 
    e.preventDefault();
    var form_data = $(this).serialize();

    $.ajax({
        type: "POST",
        url: "user/add.php",
        data: form_data,
        success: function (html) {
            document.getElementById("shadow").style.display = "none";
            document.getElementById("modal").style.display = "none";
            $('#modal').trigger('reset');
            $("#main").append(html);
        }
    });
});


add.php:

require "../database/Task.php";

if (isset($_POST['title']) && isset($_POST['description'])) {
    $task_mess = new Task;
    $task_mess->add_task($_POST['title'], $_POST['description']);

    $new_task = $task_mess->get_last_task();

    echo "<div class='task'>
            <h3>{$new_task['title']}</h3>
            <p>{$new_task['description']}</p>
          </div>";
}
Похожие вопросы