最简单的jQuery，PHP，AJAX和sqlite示例? [英] Simplest jQuery, PHP, AJAX, and sqlite example?

问题描述

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

I'm having a really difficult time understanding how this all works together. I've fiddled for a few days with this and have been unable to come up with any results. I'm trying to fill in a text field in a form, and when the form is submitted, I want to add the text to my sqlite db using ajax.

我了解您需要在jquery中调用$ .get，该调用在表单的提交时触发.这似乎很好用，因为我可以从那里触发js警报框.但是，当我传递php脚本的地址时，该脚本具有使用PDO添加到sqlite db的行，则没有任何内容添加到db.但是，当我通过使用php cli运行此php脚本时，将会在数据库中添加一些内容.

I understand that you need a $.get call in jquery which is triggered on the form's submit. That seems to work fine as I can trigger js alert boxes from there. However, when I pass the address of the php script which has lines to add to the sqlite db using PDO, nothing is added to the db. However, when I run this php script from using php cli, something will get added to the db.

我似乎在这里缺少必要的步骤.如果有人能为我弥补这一差距，我将不胜感激！

I seem to be missing an essential step here. I would really appreciate it if someone could bridge this gap for me!

按照马丁的要求，这里有一些代码:

As requested by Martin here's some code:

我的php生成类似这样的列表，中间是一个表单:

My php generates some list like this with a form in the middle:

<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(){.

Then my jquery code looks to add whatever is in the textbox right above it on the list does an ajax call. This is inside a $(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脚本，它将在我的数据库中插入一些东西:

My add.php file looks like this and it will insert something into my db if I execute the php script on the cli:

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

推荐答案

不要忘记HTTP是无状态协议.您对网络服务器发出的每个HTTP请求都将被视为相同.这代表是否使用AJAX发出HTTP请求.

Do not forget that HTTP is a stateless protocol. Each HTTP request you make to your webserver is treated the same. This stands for whether the HTTP request was made using AJAX or not.

我要说的是AJAX是客户端实现.所有AJAX的意思是您可以与Web服务器进行交互，而无需重新加载页面.第一次使用JavaScript来实现AJAX请求通常是一件容易的事，因为回调的要求和交互的一般异步特性使其难以掌握.

What I'm trying to say is that AJAX is a client side implementation. All AJAX means is that you can interact with your webserver without having to reload your page. Implementing an AJAX request for the first time in JavaScript is often a brain bender, because the requirement of callbacks and the general asynchronous nature of the interaction makes it difficult to grasp.

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

On the server however, there should be nothing to worry about. An AJAX request is still an HTTP request, so whether you navigate to http://www.yourwebsite.com/ajax/interact.php?a=1&b=2 in your browser, or make a HTTP GET request using AJAX, your PHP script will still behave exactly the same. If you var_dump($_GET); in either situation, you will get an array whose a and b members equal 1 and 2 respectively.

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

If you can emulate the AJAX request in your browser successfully by navigating to the URL manually, that's the server work done.

已经确定，您的JavaScript应该看起来像这样:

Having established that, your JavaScript should look something like this:

$('#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代码开发如下:

Once you're confident using jQuery's AJAX methods, you might want to look at methods such as serialize() to help you out, and you can develop your jQuery code to something as follows:

$('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();
});

希望这会有所帮助:)

这篇关于最简单的jQuery，PHP，AJAX和sqlite示例?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！