Простейший пример jQuery, PHP, AJAX и sqlite?

Question

Мне очень трудно понять, как все это работает вместе.Я возился с этим несколько дней и не смог придумать никаких результатов.Я пытаюсь заполнить текстовое поле в форме, и когда форма отправлена, я хочу добавить текст в базу данных sqlite, используя ajax.

Я понимаю, что вам нужен вызов $ .get в jquery, который запускается при отправке формы.Это, кажется, работает нормально, так как я могу вызывать окна оповещений js оттуда.Однако, когда я передаю адрес сценария php, в котором есть строки для добавления в базу данных sqlite с использованием PDO, в базу данных ничего не добавляется.Тем не менее, когда я запускаю этот php-скрипт с использованием php cli, что-то будет добавлено в базу данных.

Я, похоже, упускаю важный шаг здесь.Я был бы очень признателен, если бы кто-то смог преодолеть этот разрыв для меня!

Редактировать: По просьбе Мартина вот какой-то код:

Мой php генерирует такой список с формой в середине:

<ul>
    <li>hello</li>
    <li id="formItem">
        <form action="" method="post">
            <input type=text name="content"/>
        </form>
    </li>
    <li>world</li>
</ul>

Затем мой код jquery добавляет, что все, что находится в текстовом поле прямо над ним в списке, выполняет вызов ajax.Это внутри $ (document) .ready (function () {.

 $("form").submit(function() {
    var inputText = $("input").val();
    $.ajax({
        type: "POST",
        url: "add.php",
        data: inputText,
        success: function() {
            $('#formItem').prev().after(
                "<li>" + inputText + "</li>"
            )}
    });
});

Мой файл add.php выглядит следующим образом, и он вставит что-то в мою базу данных, если я выполню скрипт php на cli:

<?php 
$base = new PDO('sqlite:todo.db');
$sql = $base->prepare("INSERT INTO ThisTable (content, priority) VALUES ('lolololol', 1);");
$sql->execute();
$base = null; 
?>

Answer 1

Не забывайте, что HTTP - это протокол без сохранения состояния. Каждый HTTP-запрос к вашему веб-серверу обрабатывается одинаково. Это означает, был ли HTTP-запрос сделан с использованием AJAX или нет.

Я пытаюсь сказать, что AJAX - это реализация на стороне клиента. Все, что означает AJAX, - это то, что вы можете взаимодействовать со своим веб-сервером без перезагрузки страницы. Реализация запроса AJAX в первый раз в JavaScript часто является сложной задачей, потому что требование обратных вызовов и общий асинхронный характер взаимодействия затрудняет понимание.

Однако на сервере беспокоиться не о чем. AJAX-запрос по-прежнему является HTTP-запросом, поэтому независимо от того, перейдете ли вы к http://www.yourwebsite.com/ajax/interact.php?a=1&b=2 в своем браузере или сделаете HTTP-запрос GET с помощью AJAX, ваш PHP-скрипт будет работать точно так же. Если вы в любой ситуации var_dump($_GET);, вы получите массив, члены которого a и b равны 1 и 2 соответственно.

Если вы можете успешно эмулировать запрос AJAX в своем браузере, перейдя по URL-адресу вручную, то это работа сервера.

Установив это, ваш JavaScript должен выглядеть примерно так:

$('#yourForm').bind('submit', function (event) {
    jQuery.get('/ajax/interact.php', 'a=1&b=2', function (response) {
        alert("AJAX request succeeded, response from the server was: " + response);
    });

    event.preventDefault();
});

Если вы уверены, что используете JJuery-методы AJAX, вы можете обратиться к таким методам, как serialize(), чтобы помочь вам, и вы можете разработать свой код jQuery следующим образом:

$('form.ajax').live('submit', function (event) {
    var self = $(this);

    jQuery[(self.attr('method') || 'get').toLowerCase()](self.attr('action'), self.serialize(), function (response) {
        alert("AJAX request succeeded, response from the server was: " + response);
    });

    event.preventDefault();
});

Надеюсь, это поможет:)

Answer 2

Ваша submit функция должна return false;