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

Question

我很难理解这些内容是如何一起运作的。我试了几天，但没有任何结果。我的目标是填写表单中的文本字段，当提交表单时，我想使用AJAX将该文本添加到我的SQLite数据库中。

我知道你需要在jQuery中使用$.get调用，在表单提交时触发它。这似乎很好用，因为我可以从那里触发js警报框。但是，当我传递每行添加到SQLite数据库的PHP脚本地址时，数据库中没有添加任何内容。然而，当我使用php cli运行此PHP脚本时，会添加一些内容到数据库中。

我似乎缺少一个基本步骤。如果有人能为我搭建这个桥梁，我将不胜感激！

编辑： 根据Martin的要求，这里有一些代码：

我生成了一些类似于以下列表的内容，并在其中间包含了一个表单：

<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; 
?>

- Kevin

---

一些代码可能会帮助我们更好地帮助您。 - Martin

最好是逐个学习并更好地理解您提到的每个工具，而不是将它们作为一个整体来学习。将它们作为一个整体学习可能不会养成最佳的习惯。 - mattbasta

Answer 1

不要忘记HTTP是一种无状态协议。每个发往web服务器的HTTP请求都被视为相同。这适用于使用AJAX还是不使用AJAX发出的HTTP请求。

我的意思是，AJAX是客户端实现。所有AJAX意味着你可以与你的web服务器交互而无需重新加载页面。在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();
});

希望这有所帮助 :)

- Matt

Answer 2

你的 submit 函数应该 return false;

- Gutzofter