Created
July 14, 2012 11:25
-
-
Save webaware/3110728 to your computer and use it in GitHub Desktop.
basic example of populating a form from a database using AJAX and JSON
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /* | |
| -- the SQL database table | |
| create table form_ajax ( | |
| ID varchar(5) not null, | |
| Name varchar(100), | |
| Address varchar(100), | |
| Phone varchar(20), | |
| Email varchar(255), | |
| constraint form_ajax_pk primary key (ID) | |
| ); | |
| -- the data | |
| insert into form_ajax(ID, Name, Address, Phone, Email) | |
| values('123', 'Test Only', '123 Smith Street Jonestown 2000 NSW', '0123456789', '[email protected]'); | |
| */ | |
| // simplified to provide an example; deal with non-standards browsers yourself | |
| // please use some common sense and add more structure, error handling, etc. | |
| // NB: the PHP stuff is all server side, and is the AJAX service | |
| // check for AJAX request | |
| if (isset($_GET['action'])) { | |
| if ($_GET['action'] == 'fetch') { | |
| // tell the browser what's coming | |
| header('Content-type: application/json'); | |
| // open database connection | |
| $db = new PDO('mysql:dbname=test;host:localhost;', 'website', 'website'); | |
| // use prepared statements! | |
| $query = $db->prepare('select * from form_ajax where ID = ?'); | |
| $query->execute(array($_GET['ID'])); | |
| $row = $query->fetch(PDO::FETCH_OBJ); | |
| // send the data encoded as JSON | |
| echo json_encode($row); | |
| exit; | |
| } | |
| } | |
| ?> | |
| <!DOCTYPE html> | |
| <html lang="en-au"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Form from AJAX</title> | |
| <script> | |
| // NB: the JavaScript stuff here is all client side and is the AJAX client | |
| // encapsulate the lot within a function scope called on document ready | |
| window.addEventListener("DOMContentLoaded", function() { | |
| // hook the submit action on the form | |
| var frm = document.getElementById("form-ajax"); | |
| frm.addEventListener("submit", frm_submit, false); | |
| /** | |
| * function to handle form submit, and request data from server | |
| * @param {Event} event | |
| */ | |
| function frm_submit(event) { | |
| // stop the form submitting | |
| event.preventDefault(); | |
| // grab the ID and send AJAX request if not (empty / only whitespace) | |
| var ID = this.elements.ID.value; | |
| if (/\S/.test(ID)) { | |
| ajax_request(this.action, {"action" : "fetch", "ID" : ID}, process_response); | |
| } | |
| else { | |
| alert("No ID supplied"); | |
| } | |
| } | |
| /** | |
| * send an ajax request, with successful response handled by callback | |
| * @param {String} url the url to send the request to | |
| * @param {Object} data map of the data that we'll send | |
| * @param {Function} callback the function that will process the AJAX response | |
| */ | |
| function ajax_request(url, data, callback) { | |
| var i, parts, xhr; | |
| // if data is an object, unroll as HTTP post data (a=1&b=2&c=3 etc.) | |
| if (typeof data == "object") { | |
| parts = []; | |
| for (i in data) { | |
| parts.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i])); | |
| } | |
| data = parts.join("&"); | |
| } | |
| // create an XML HTTP Request object | |
| xhr = new XMLHttpRequest(); | |
| if (xhr) { | |
| // set a handler for changes in ready state | |
| xhr.onreadystatechange = function() { | |
| if (xhr.readyState == 4) { | |
| // check for HTTP status of OK | |
| if (xhr.status == 200) { | |
| try { | |
| callback(JSON.parse(xhr.responseText)); | |
| } | |
| catch(e) { | |
| console.log(xhr.responseText); // for debug | |
| alert("AJAX request incomplete:\n" + e.toString()); | |
| } | |
| } | |
| else { | |
| alert("AJAX request failed: " + xhr.status); | |
| } | |
| } | |
| }; | |
| // open connection and send payload | |
| xhr.open("GET", url + "?" + data, true); | |
| xhr.send(null); | |
| } | |
| } | |
| /** | |
| * process the response, populating the form fields from the JSON data | |
| * @param {Object} response the JSON data parsed into an object | |
| */ | |
| function process_response(response) { | |
| var frm = document.getElementById("form-ajax"); | |
| var i; | |
| console.dir(response); // for debug | |
| for (i in response) { | |
| if (i in frm.elements) { | |
| frm.elements[i].value = response[i]; | |
| } | |
| } | |
| } | |
| }, false); | |
| </script> | |
| </head> | |
| <body> | |
| <form id="form-ajax" action="form-ajax.php"> | |
| <label>ID:</label><input type="text" name="ID" /><br /> | |
| <label>Name:</label><input type="text" name="Name" /><br /> | |
| <label>Address:</label><input type="text" name="Address" /><br /> | |
| <label>Phone:</label><input type="text" name="Phone" /><br /> | |
| <label>Email:</label><input type="email" name="Email" /><br /> | |
| <input type="submit" value="fill from db" /> | |
| </form> | |
| </body> | |
| </html> |
@monomita: in what way? What error does it give? Are you running it on a server with PHP and MySQL? Do you have a database? Did you modify the connection properties to match your server? Did you create the table? etc.
Hi, i have all my settings in the right way, but I only get a popup saying: AJAX request failed: 404.
I can't figure out what I'm missing...
Hi, sorry, my fault, i was missing the page form-ajax.php ( I was using one single page gistfile1.php ).
Now is working like a charm, thanks a lot. Do you think it's possible to first query the database and than build the form in the page, based on the retrieved json string?
I get the error: No ID supplied
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This code is not running successfully.