Как реализовать динамическое добавление записей с помощью 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() для удаления предыдущих обработчиков событий перед добавлением нового. <br/> 2. Исправь код AJAX, чтобы ограничить количество перерисовок элементов. <br/> <br/> <pre><code class="javascript">$("#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);
        }
    });
});</code></pre> <br/> <br/> add.php: <br/> <br/> <pre><code class="php">require "../database/Task.php";

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

    $new_task = $task_mess-&gt;get_last_task();

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