Как правильно записать данные в БД ajax-ом?

Question

HTML

`<a id="1"onclick="P('1');" class="a" href="#">fsdfs</a>
<a id="2"onclick="P('2');" class="a" href="#">fsdfs</a>
<a id="3"onclick="P('3');" class="a" href="#">fsdfs</a>
        <script src="Add.js">
           
        </script>

`
JS `function P(id) {
    $(document).ready(function () {
        $(this).click(function () {
            $.ajax({
                url: 'Result.php',
                method: 'post',
                dataType: 'json',
                data: { 'text': id },
                beforeSend: () => {
                    console.log("+");
                },   //этот коллбэк выполняется перед отправкой запроса
                // этот обработчик выполняется, когда сервер присылает 
                // успешный ответ
                success: (data) => {
                    // data - это тело ответа сервера
                    console.log(data);
                },
                // этот коллбэк выполняется, когда сервер присылает ошибку (коды 300+)
                error: (xhr) => {
                    console.log(xhr);
                },
                // этот коллбэк выполнится в любом случае - при успешном и неуспешном запросе
                complete: (lol) => {
                    // какие-то действия
                }
            });
        });
    });
}`

PHP

`<?php
include 'Conn.php';
include 'pp.php';

if (isset($_POST) && !empty($_POST['text'])) {
    $t = json_decode($_POST['text']);
    mysqli_query($connect, "INSERT INTO `pp`(`pass`) VALUEs('$t')");
}
`

Некорректно отправляет данные в БД в моём случаи id. Вот что выходит:

Хотя я нажимаю ссылки по порядку и в БД тоже id должен быть по порядку

Answer 1

Ужасы какие-то городите...

Сразу учимся корректному неймингу. Называть функцию P, давать класс a - не корректно.
Если хотите отправлять запрос используя onclick атрибут, то функция, которую указываете должна сразу выполнять поставленную задачу (в вашем случае - отправлять ajax запрос).

Корректно:

<a id="3" onclick="send('3');" class="link" href="#">fsdfs</a>

...

function send(id) {
    $.ajax({...});
}

Если хотите делать отправку используя jQuery метод .click():

2.1. не нужен атрибут с функцией для отправки (onclick="send('3');")

2.2. нужно указывать конкретный эл-т, на котором будет работать событие (вы же используете контекст document (HTMLDocument) - this)

Корректно:

<a id="3" class="link" href="#">fsdfs</a>

    ...

$(document).ready(function () {
    $('.link').click(function (e) {
        let id = e.target.id;
        $.ajax({
            url: 'Result.php',
            method: 'post',
            dataType: 'json',
            data: { 'text': id },
            beforeSend: () => {
                console.log("+");
            },   //этот коллбэк выполняется перед отправкой запроса
            // этот обработчик выполняется, когда сервер присылает 
            // успешный ответ
            success: (data) => {
                // data - это тело ответа сервера
                console.log(data);
            },
            // этот коллбэк выполняется, когда сервер присылает ошибку (коды 300+)
            error: (xhr) => {
                console.log(xhr);
            },
            // этот коллбэк выполнится в любом случае - при успешном и неуспешном запросе
            complete: (lol) => {
                // какие-то действия
            }
        });
    });
});

Серверная часть (Result.php):

3.1. Вы отправляете json: { 'text': id }, но сервер, грубо говоря, воспринимает это как массив данных, в вашем случае, $_POST. Вы можете просто указать $_POST['text'] и это уже будут нужные вам данные, не нужен никакой json_decode.

3.2. Нельзя в запрос сразу вставлять данные, которые прилетают с фронта. Нужно их проверять, убирать "лишнее" (вредоносный код, назовём это так). В вашем случае, если вы уверены что данные это числа, можно просто добавить приведение к типу: $id = (int)$_POST['text'];

3.3. Всегда добавляйте проверку выполнился запрос или нет, исходя из чего отправляйте ответ, который увидите в success методе $.ajax()

БЛОГ НА HUSL

Как правильно записать данные в БД ajax-ом?

Ответы (1 шт):