php - 最简单的 jQuery、PHP、AJAX 和 sqlite 示例？

Question

我很难理解这一切是如何协同工作的。我已经摆弄了几天，却无法得出任何结果。我正在尝试填写表单中的文本字段，提交表单后，我想使用 ajax 将文本添加到我的 sqlite 数据库中。

我知道您需要在 jquery 中调用一个 $.get 调用，该调用在表单提交时触发。这似乎工作正常，因为我可以从那里触发 js 警报框。但是，当我传递包含要使用 PDO 添加到 sqlite 数据库的行的 php 脚本的地址时，数据库中没有添加任何内容。然而，当我使用 php cli 运行这个 php 脚本时，一些东西会被添加到数据库中。

我似乎错过了这里必不可少的一步。如果有人能为我弥合这一差距，我将不胜感激!

编辑:按照 Martin 的要求，这里有一些代码:

我的 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 文件看起来像这样，如果我在 cli 上执行 php 脚本，它会在我的数据库中插入一些东西:

<?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 是一种无状态协议(protocol)。您向网络服务器发出的每个 HTTP 请求都被同等对待。这代表 HTTP 请求是否使用 AJAX 发出。

我想说的是 AJAX 是一种客户端实现。 AJAX 的全部意思是您可以与您的网络服务器交互而无需重新加载您的页面。第一次在 JavaScript 中实现 AJAX 请求通常是一件费脑筋的事情，因为回调的要求和交互的一般异步性质使其难以掌握。

然而，在服务器上，应该没有什么可担心的。 AJAX 请求仍然是 HTTP 请求，所以无论您导航到 http://www.yourwebsite.com/ajax/interact.php?a=1&b=2在您的浏览器中，或使用 AJAX 发出 HTTP GET 请求，您的 PHP 脚本的行为仍然完全相同。如果您在任何一种情况下var_dump($_GET);，您将得到一个数组，其a 和b 成员等于1 和 2 分别。

如果您可以通过手动导航到 URL 成功地在浏览器中模拟 AJAX 请求，那么服务器的工作就完成了。

确定后，您的 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();
});

一旦您有信心使用 jQuery 的 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();
});

希望这有帮助:)