最简单的jQuery,PHP,AJAX和sqlite示例？

Question

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

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

我似乎错过了这里必不可少的一步.如果有人能为我弥合这个差距,我将非常感激!

编辑:按照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 是无状态协议。您向网络服务器发出的每个 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();
});

希望这可以帮助 ：）