SitePoint Sponsor |
|
User Tag List
Results 1 to 13 of 13
Thread: Ajax - Passing results back
-
Aug 2, 2007, 06:04 #1
- Join Date
- Jul 2002
- Location
- England
- Posts
- 430
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Ajax - Passing results back
Hi all,
I'm just getting started with Ajax. I've found out how to run an outside PHP script and return the results in the Ajax page, but I want to take the results a bit further now.
Instead of outputting the values in the PHP script, I want to pass the information I collected in the PHP file to the Ajax file. Does anyone know how I could do this?
Sorry if that seems a little complicated, it was hard to explain
Thanks,
Mike
-
Aug 2, 2007, 06:38 #2
- Join Date
- Oct 2004
- Location
- Birtley, UK
- Posts
- 2,439
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
As long as the output is text, you can pass almost anything from php through ajax to your page.
So if you have some data you want to pass down, output it using your php page, and then your javascript will do the rest (with a little help).
When you mean information you collected in the php file, can you explain this a little more?
Gav
-
Aug 2, 2007, 07:12 #3
- Join Date
- Nov 2003
- Location
- Bridgeport
- Posts
- 292
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I think you want to pass your results as XML or JSON types. Rather than simply print results to the screen, you can retrieve objects in the form of XML or JSON, then you can do whatever you want.
RichTestani
-------------------------------
http://www.junkdepot.com
http://www.rareoopdvds.com | The Movie Poster Site
-
Aug 2, 2007, 09:46 #4
-
Aug 2, 2007, 11:06 #5
- Join Date
- Oct 2004
- Location
- Birtley, UK
- Posts
- 2,439
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
IIRC you can use something to convert the mysql_result into either JSON or XML data, or if you want to start simple, output it as CSV.
Basically, what ever you want to transfer across to your page via ajax, you need to use PHP to write it to the page, so if you were to view it normally in the browser, you'd see data.
Gav
-
Aug 2, 2007, 11:37 #6
- Join Date
- Jul 2002
- Location
- England
- Posts
- 430
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Heh, seems complicated, thanks for your advice.
-
Aug 2, 2007, 11:51 #7
- Join Date
- Oct 2004
- Location
- Birtley, UK
- Posts
- 2,439
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
not really, I'm sure you could use print_r with the mysql_result value.
heres something that may help: http://codingforums.com/archive/index.php?t-74902.html
http://www.cristiandarie.ro/ajax-php/
-
Aug 2, 2007, 12:28 #8
- Join Date
- Jul 2002
- Location
- England
- Posts
- 430
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Well what I want to do is get the results from the PHP page and return some links. When one of these links is clicked, I want a form to be auto filled based on the results from the PHP page.
Would that be possible?
-
Aug 2, 2007, 12:38 #9
- Join Date
- Oct 2004
- Location
- Birtley, UK
- Posts
- 2,439
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Its easier to do then explain.
I'm stuck as to how to explain it, without throwing an example at you.
I'll see what i can do and find for you.
-
Aug 2, 2007, 13:12 #10
- Join Date
- Oct 2004
- Location
- Birtley, UK
- Posts
- 2,439
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
ok:
create a php file called test.php
Code:<?php if(isset($_GET["id"])) { switch($_GET["id"]) { case "1" : echo "Joe Blogs;Joe@Blogs.com;Street Name\nTown Name\nCity\nPost Code;http://www.sitepoint.com/forums/images/spavatars/071.gif"; break; case "2" : echo "Fred Johns;Fred@Jones.com;Street Name\nTown Name\nCity\nPost Code;http://www.sitepoint.com/forums/images/spavatars/072.gif"; break; case "3" : echo "Jane Doe;Jane@Doe.com;Street Name\nTown Name\nCity\nPost Code;http://www.sitepoint.com/forums/images/spavatars/073.gif"; break; case "4" : echo "John Doe;John@Doe.com;Street Name\nTown Name\nCity\nPost Code;http://www.sitepoint.com/forums/images/spavatars/074.gif"; break; } } else { echo "1:Joe Blogs;2:Fred Jones;3:Jane Doe;4:John Doe"; } ?>
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" media="screen" /> <style type="text/css"> * { font-family: verdana, tahoma, sans-serif; } #userDetails { display: none; padding-top: 10px; } </style> <script type="text/javascript"> function getUsers() { var request = createXMLHttpRequest(); request.open("GET", "test.php", true); request.onreadystatechange = function() { if (request.readyState == 4) { if(request.status == 200) { var combo = document.getElementById('users'); combo.length = 1; var usrs = request.responseText.split(';'); for(var i = 0; i < usrs.length; i++) { var usr = usrs[i].split(':'); combo.options[combo.options.length] = new Option(usr[1], usr[0]); } } else { alert('An error has occurred'); } } } request.send(null); } function getUser(id) { var request = createXMLHttpRequest(); request.open("GET", "test.php?id=" + id, true); request.onreadystatechange = function() { if (request.readyState == 4) { if(request.status == 200) { var uDetails = document.getElementById('userDetails'); var txtName = document.getElementById('txtName'); var txtEmail = document.getElementById('txtEmail'); var txtAddress = document.getElementById('txtAddress'); var imgProfile = document.getElementById('imgProfile'); // name; email; address; img var items = request.responseText.split(';'); txtName.value = items[0]; txtEmail.value = items[1]; txtAddress.value = items[2]; imgProfile.src = items[3]; uDetails.style.display = 'block'; } else { alert('An error has occurred'); } } } request.send(null); } function createXMLHttpRequest() { if (typeof XMLHttpRequest != "undefined") { return new XMLHttpRequest(); } else if (typeof ActiveXObject != "undefined") { return new ActiveXObject("Microsoft.XMLHTTP"); } else { throw new Error("XMLHttpRequest not supported"); } } window.onload = getUsers; </script> </head> <body> <label for="users">User: </label> <select id="users" onchange="getUser(this.value);"> <option value="0">Select User</option> </select> <div id="userDetails"> <label for="txtName">Name: </label><input type="text" id="txtName" /><br /> <label for="txtEmail">E-Mail: </label><input type="text" id="txtEmail" /><br /> <label for="txtAddress">Address: </label><textarea id="txtAddress"></textarea><br /><br /> <img id="imgProfile" src="#" width="75px" height="75px" /> </div> </body> </html>
Put them both on the server.
This example goes and gets a list of users from test.php, and populates the combobox with the details. When you select a user from the combobox, it will go away to test.php and get the details for the selected user.
Hopefully its clear enough for you to understand?
-
Aug 2, 2007, 13:29 #11
- Join Date
- Jul 2002
- Location
- England
- Posts
- 430
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks very much, that's given me a great base to work on. I didn't realise you could make two AJAX requests in one script. Thanks again!
-
Aug 2, 2007, 13:34 #12
- Join Date
- Oct 2004
- Location
- Birtley, UK
- Posts
- 2,439
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
If you had the time and patience, you could write a whole web site, based on one page, using loads of AJAX Requests pulling and pushing data all over the place.
The biggest problem is dealing with those lovely people that have browsers that have javascript disabled etc.
-
Aug 2, 2007, 14:08 #13
- Join Date
- Jul 2002
- Location
- England
- Posts
- 430
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Well I tried to start my own version, yet this won't even work at all:
Code:<html> <script language="javascript" type="text/javascript"> function createXMLHttpRequest() { if (typeof XMLHttpRequest != "undefined") { return new XMLHttpRequest(); } else if (typeof ActiveXObject != "undefined") { return new ActiveXObject("Microsoft.XMLHTTP"); } else { throw new Error("XMLHttpRequest not supported"); } } // Create a function that will receive data sent from the server var request = createXMLHttpRequest(); request.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){ document.getElementById('ajaxDiv') = request.responseText; } var searchquery = document.myForm.searchquery.value var querystring = "?searchquery=" + searchquery; request.open("GET", "test.php" + querystring, true); request.send(null); } </script> <form name='myForm'> <input type='text' name='searchquery' onkeyup="Start();"> </form> <div id="ajaxDiv"> </div> </html>
Thanks,
Mike
Bookmarks