CodingForums.com

CodingForums.com (http://www.codingforums.com/index.php)
-   Ajax and Design (http://www.codingforums.com/forumdisplay.php?f=55)
-   -   AJAX Noob (http://www.codingforums.com/showthread.php?t=110660)

Forsaken 03-24-2007 08:13 PM

AJAX Noob
 
Alright I'm new to ajax but I wanted to know how to go about this using POST I can't find examples and the ones I look at show I'm doing this right but it doesnt seem to be working maybe someone can catch my error.


Index
Code:

<html>
        <head>

        <script language="javascript" type="text/javascript">
        <!--
        //Browser Support Code
        function ajaxFunction(){
                var ajaxRequest;  // The variable that makes Ajax possible!
               
                try{
                        // Opera 8.0+, Firefox, Safari
                        ajaxRequest = new XMLHttpRequest();
                } catch (e){
                        // Internet Explorer Browsers
                        try{
                                ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
                        } catch (e) {
                                try{
                                        ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                                } catch (e){
                                // Something went wrong
                                        alert("Your browser broke!");
                                        return false;
                                }
                        }
                }
                // Create a function that will receive data sent from the server
                ajaxRequest.onreadystatechange = function(){
                        if(ajaxRequest.readyState == 4){
                                var ajaxPlayers = document.getElementById('ajaxPlayers');
                                ajaxPlayers.innerHTML = ajaxRequest.responseText;
                        }
                }
               
                var limit = document.getElementById('limit').value;

                ajaxRequest.open("POST", "players.php", true);
                ajaxRequest.send(limit);
        }
       
        //-->
        </script>
        </head>


        <body>

                <form method=POST>
                <table align='center'>
                        <tr>
                                <td>
                                        Max Limit:
                                </td>
                                <td>
                                        <input type='text' id='limit' onChange=''>
                                </td>
                        </tr>
                        <tr>
                                <td colspan=2>
                                        <input type='button' value='Retrieve' onClick='ajaxFunction()'>
                                </td>
                        </tr>
                </table>
                </form>

                <div id='ajaxPlayers'>Your Results</div>
        </body>
</html>


players.php
PHP Code:

<?

include("config.php");

$limit $_POST['limit'];
echo 
"limit: $limit";


    
$query mysql_query("SELECT * FROM `accounts` ORDER BY `id` ASC LIMIT $limit");

    echo(
"<table>");
    while(
$row mysql_fetch_array($query))
    {
        
$id $row['id'];
        
$username $row['username'];
        
$password $row['password'];
        
$email $row['email'];

        echo(
"
        <tr>
            <td>
                $id
            </td>

            <td>
                $username
            </td>

            <td>
                $password
            </td>

            <td>
                $email
            </td>
        </tr>
        "
);
    }
        echo(
"</table> <br> Posts:");

    
print_r($_POST);
?>

I want to get the limit to pass through but it just doesnt post any ideas?

jmitch18 03-24-2007 08:22 PM

Does it really need to be done using POST? Personally I would use GET and do it the following way:

Code:

ajaxRequest.open("GET", "players.php?limit=" + limit, true);
Then just make the appropriate change in the PHP file.

If it's absolutely necessary for it to be done using POST then sorry for not being much help there.

Forsaken 03-24-2007 08:23 PM

its okay, its not necessary I'm doing this as a learning experience, yeah I know how to do it with GET it's successful with that I just want to learn how to do it with POST as said previously :-\. thanks though

carlitos_way 03-26-2007 09:11 AM

with a POST request you have to send the parameters separating them from the url. so you create a variable in which you place the values from your form

Code:

var parameters = "limit=" + encodeURI( document.getElementById("limit").value );
and in the request you add these lines
Code:

...
        ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        ajaxRequest.setRequestHeader("Content-length", parameters.length);
        ajaxRequest.setRequestHeader("Connection", "close");
        ajaxRequest.send(parameters);

haven't tested it with your program, but you should work it now without any problem...

alexharvey_eu 02-19-2008 09:38 PM

i was using this to post name-value pairs to a php script

you can add onblur="ajaxFunction(this.id,this.value)" to your forms input fields so they can validate in real time. I had div elements with id's the same as their corrosponding form field but with an x infront (i read somewhere not to give things the same id). hope this helps anyone...

Code:

function ajaxFunction(id,value){
        var ajaxRequest;//ajax var
       
        try{// Opera 8.0+, Firefox, Safari
                ajaxRequest = new XMLHttpRequest();
        }catch(e){//Internet Explorer Browsers
                try{
                        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
                }catch(e){
                        try{
                                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                        }catch(e){// Something went wrong
                                return false;
                        }
                }
        }
       
        ajaxRequest.onreadystatechange = function(){//handle response
                if(ajaxRequest.readyState == 4){
                        document.getElementById("x"+id).innerHTML = ajaxRequest.responseText;
                }
        }
        var infoToSend = encodeURI("id="+id+"&value="+value);
        ajaxRequest.open("POST", "server.php", true);
        ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        ajaxRequest.setRequestHeader("Content-length", infoToSend.length);
        ajaxRequest.setRequestHeader("Connection", "close");
        ajaxRequest.send(infoToSend);
}



All times are GMT +1. The time now is 12:41 PM.

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.