Ajax - Passing results back

**webmasternovis** · Aug 2, 2007, 06:04

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

**gRoberts** · Aug 2, 2007, 06:38

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

**richtestani** · Aug 2, 2007, 07:12

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.

**webmasternovis** · Aug 2, 2007, 09:46

Originally Posted by gRoberts

When you mean information you collected in the php file, can you explain this a little more?
Gav

Say I make a query to MySQL in the PHP file... I want to be able to use the results in the original AJAX file. I'm not sure how I can pass them though... which is where I need help

**gRoberts** · Aug 2, 2007, 11:06

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

**webmasternovis** · Aug 2, 2007, 11:37

Heh, seems complicated, thanks for your advice.

**gRoberts** · Aug 2, 2007, 11:51

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/

**webmasternovis** · Aug 2, 2007, 12:28

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?

**gRoberts** · Aug 2, 2007, 12:38

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.

**gRoberts** · Aug 2, 2007, 13:12

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";
    }

?>

and create a page called test.html (or anything you want)

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: &nbsp;</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?

**webmasternovis** · Aug 2, 2007, 13:29

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!

**gRoberts** · Aug 2, 2007, 13:34

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.

**webmasternovis** · Aug 2, 2007, 14:08

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>

As something is typed in the searchquery input box, a simple PHP script is supposed to run. Does anyone know why this doesn't work?

Thanks,
Mike

The SitePoint Forums have moved.

User Tag List

Thread: Ajax - Passing results back

Thread Tools

Display

Ajax - Passing results back

Bookmarks

Bookmarks

Posting Permissions