How do I use Ajax and Jquery to pull information off a PHP database, and populate elements with that information?

Question

Hey everyone,

I am tweaking a website to make it easier for employees to edit products. Right now, someone has to login to the DB and change prices, and then someone has to change the physical html of the website itself.

So I am writing code that pulls all the products off the DB, and displays them on a page which can be edited. I think doing everything with Ajax would be best.

ajaxRequest.open("GET", url, true); ajaxRequest.send(null);

The problem is, I only know how to process Ajax requests using a URL (using POST, GET, etc). I need help writing the code to pull the info off the DB, and display it.

The table name is PRODUCTS. Within PRODUCTS are the columns ID, STOCK, SHORTNAME, DESCRIPTION, PRICE and SHIPPING.

In the HTML, I have a div setup:

<div class="product">

   <div class="productName">
   SHORTNAME, PRICE, SHIPPING
   </div>
   <div class="productDesc">
   ID, DESCRIPTION, STOCK
   </div>

</div>

I want to set it up so if I click a button, ajax pulls all the information off PRODUCT, and creates .productName div. If the user clicks .productName, it will then further expand to reveal .productDesc.

Question: How to I query the DB using AJAX on a button click, and put the information into elements?

Answer 1

PHP - actually, it seems to be no job for jquery - once somebody edits it in DB, app gets latest information every hit.

Unless I misinterpreted your question, I see nothing this has to do with jQuery/AJAX.

Answer 2

Ajax cannot access your database. Ajax simply loads content from a URL. Your application must do this, and provide the result to an ajax call.

Here's how it will work.

1. Browser open a url on your server
2. PHP renders a page for display on the browser
3. User clicks something
4. Javascript sends an Ajax request to your server
5. PHP recieves this request and queries the database
6. PHP renders a response for the request
7. The Ajax handler on your page receives this response as plain text and does something interesting with it (such an inserting HTML, evaluating JSON, or executing javascript)

Ajax is just a way to load the response from a URL without actually navigating your browser to that page. It does not (and should not) have any sort of direct database access. In fact it has no idea there is a database at all.

Imagine the security issues if any javascript could read or write any field in your database. it would be a hackers dream.

Answer 3

You have to write a PHP script that queries the database and returns the results either as JSON or HTML.

This script is called via jQuery. E.g.

$('#main').load('http://your-url.com/yourscript.php');

This loads the output generated by yourscript.php (given that it is HTML) into an element with ID main.

You can find an Ajax tutorial with jQuery here. And a lot more tutorials on the jQuery tutorials site.