Jump to content



Photo

Jquery ajax


  • Please log in to reply
4 replies to this topic

#1 Craig Hopson

Craig Hopson

    Neowinian

  • Joined: 17-November 12
  • Location: London
  • OS: Windows 8 :-(

Posted 17 November 2012 - 20:54

hi can some one explain to me what is going on with this code please

index.php
<!DOCTYPE html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script>
var data = 'something-here';
$.ajax({
    type: 'POST',
    url: 'post.php',
    data: data
});
</script>



post.php


<?php
ob_start();
var_dump($_POST);
$data = ob_get_clean();
$fp = fopen("textfile.txt", "w");
fwrite($fp, $data);
fclose($fp);
?>

textfile.txt


array(0) {
}


why is the $_POST variable empty? and how would i post 2 variables like $_POST['firstname'] and $_POST['lastname']


#2 Mr. Half

Mr. Half

    Neowinian

  • Joined: 01-June 10

Posted 18 November 2012 - 06:14

The jQuery ajax method expects 'data' to be an object, rather than a string.

You should change this line:
var data = 'something-here';

to this:
var data = { 'firstname': 'John', 'lastname': 'Smith' };


#3 OP Craig Hopson

Craig Hopson

    Neowinian

  • Joined: 17-November 12
  • Location: London
  • OS: Windows 8 :-(

Posted 18 November 2012 - 10:16

The jQuery ajax method expects 'data' to be an object, rather than a string.

You should change this line:

var data = 'something-here';

to this:
var data = { 'firstname': 'John', 'lastname': 'Smith' };


Thanks been looking for this answer for long time i'm still learning how would i replace "John" with a variable
var firstname = 'john';


#4 OP Craig Hopson

Craig Hopson

    Neowinian

  • Joined: 17-November 12
  • Location: London
  • OS: Windows 8 :-(

Posted 18 November 2012 - 11:02

ok some more details here is the full script
<!DOCTYPE html>
<html>
  <head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
    <style>
	  #tripmeter {
	    border: 3px double black;
	    padding: 10px;
	    margin: 10px 0;
	  }
	 
	  p {
	    color: #222;
	    font: 14px Arial;
	  }
	 
	  span {
	    color: #00C;
	  }
    </style>
  </head>
  <body>
    <div id="tripmeter">
	  <p>
	    Starting Location (lat, lon):<br/>
	    <span id="startLat">???</span>&deg;, <span id="startLon">???</span>&deg;
	  </p>
	  <p>
	    Current Location (lat, lon):<br/>
	    <span id="currentLat">???</span>&deg;, <span id="currentLon">???</span>&deg;
	  </p>
	
    </div>
    <script>
	  window.onload = function() {
	    var startPos;
	 
	    if (navigator.geolocation) {
		  navigator.geolocation.getCurrentPosition(function(position) {
		    startPos = position;
		    document.getElementById("startLat").innerHTML = startPos.coords.latitude;
		    document.getElementById("startLon").innerHTML = startPos.coords.longitude;
		  }, function(error) {
		    alert("Error occurred. Error code: " + error.code);
		    // error.code can be:
		    //   0: unknown error
		    //   1: permission denied
		    //   2: position unavailable (error response from locaton provider)
		    //   3: timed out
		  });
	 
		  navigator.geolocation.watchPosition(function(position) {
		    document.getElementById("currentLat").innerHTML = position.coords.latitude;
		    document.getElementById("currentLon").innerHTML = position.coords.longitude;
		   
		  });
	    }
	  };
	
    </script>
    <script>
	 
	
$.ajax({
    type: 'POST',
    url: 'post.php',
    data: data
});

</script>
  </body>
</html>

What i'm trying to do is log the current location every 20 seconds and pass it to post.php so it can insert it into a mysql database

#5 Mr. Half

Mr. Half

    Neowinian

  • Joined: 01-June 10

Posted 19 November 2012 - 10:24

Sounds like an interesting project.

Answering your first question, you can just replace the string with the name of the variable and it will work in exactly the same way:

var firstname = 'john';
var data = { 'firstname': firstname, 'lastname': 'Smith' };

If you want to perform an action at a particular interval, take a look at the window.setInterval method. It would look something like this (the interval is in milliseconds):

window.setInterval(function() {
  // Get position here
  // Save position here
}, 20000);




Click here to login or here to register to remove this ad, it's free!