Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: AJAX Noob

  1. #1
    New Coder
    Join Date
    May 2006
    Location
    California
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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?
    Last edited by Forsaken; 03-24-2007 at 09:20 PM.

  • #2
    New Coder
    Join Date
    Mar 2007
    Location
    Northern Ireland
    Posts
    40
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #3
    New Coder
    Join Date
    May 2006
    Location
    California
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    New Coder
    Join Date
    Mar 2007
    Location
    italy
    Posts
    94
    Thanks
    1
    Thanked 1 Time in 1 Post
    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...

  • #5
    New to the CF scene
    Join Date
    Feb 2008
    Location
    Manchester, UK
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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); 
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •