The simplest example of jQuery, PHP, AJAX and sqlite?

Question

It’s very difficult for me to understand how all this works. I spent several days with this and could not come up with any results. I am trying to fill in a text box on a form, and when the form is submitted, I want to add text to my sqlite db using ajax.

I understand that you need a call to $ .get in jquery, which runs in the submit form. This is similar to the fact that I can run js-boxes. However, when I pass in the address of a php script that has lines to add to sqlite db using PDO, nothing is added to db. However, when I run this PHP script using php cli, something will be added to db.

It seems to me that there is no significant step. I would really appreciate if someone could bridge this gap for me!

Edit: At Martin's request, there is a code here:

My php generates a 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> 

Then my jquery code looks like to add everything that is in the text box directly above it, ajax is called in the list. This is inside $ (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>" )} }); }); 

My add.php file looks like this and it will insert something into my db if I run the php script in 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

Remember that HTTP is a stateless protocol. Every HTTP request that you make to your web server is handled the same. This means whether the HTTP request was completed using AJAX or not.

I'm trying to say that AJAX is a client-side implementation. All AJAX means that you can interact with your web server without reloading your page. Implementing an AJAX request for the first time in JavaScript is often a brain curve because the callback requirement and the general asynchronous nature of the interaction make it difficult to understand.

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

If you can successfully emulate the AJAX request in your browser by manually navigating to the URL to make the server work.

By setting this, 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(); }); 

Once you are confident in using jQuery AJAX methods, you can look at methods such as serialize() to help you, and you can develop jQuery code 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(); }); 

Hope this helps :)

Answer 2

Your submit function should return false;