使用AJAX将地理位置数据发布到PHP

Question

I've looked through a few similar threads - but can't see exactly where I am going wrong. I'm savng the lat & lng of a user on an app I'm creating, using AJAX & PHP. I know the AJAX & PHP works as it saves everything (even dummy lat & lng values) to my database table. I've been playing with the variables for a couple of hours now, and the best results I have had so far is a '0' value inserted in the database.

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
getCurrentLocation();
}
function onError(message) {
navigator.notification.alert(message, "", "Error");
}
function getCurrentLocation() {
navigator.geolocation.getCurrentPosition(locationSuccess, onError);
}
function locationSuccess(position) {
lat = document.getElementById("latSpan");
lon = document.getElementById("latSpan");
latitude = position.coords.latitude;
longitude = position.coords.longitude;
}
//recording function
function getXMLObject()  //XML OBJECT
{
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")  // For Old Microsoft Browsers
}
catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")  // For Microsoft IE 6.0+
}
catch (e2) {
xmlHttp = false   // No Browser accepts the XMLHTTP Object then false
}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') 
{ 
xmlHttp = new XMLHttpRequest();        //For Mozilla, Opera Browsers
}
return xmlHttp;  // Mandatory Statement returning the ajax object created
}
var xmlhttp = new getXMLObject();   //xmlhttp holds the ajax object 
function ajaxFunction() {
var getdate = new Date();  //Used to prevent caching during ajax call
if(xmlhttp) { 
xmlhttp.open("POST","http://www.lauracrane.co.uk/app/rec/location.php",true); //
xmlhttp.onreadystatechange  = handleServerResponse;
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send("latitude=" + latitude + "&longitude=" + longitude);
}
}
function handleServerResponse() {
if (xmlhttp.readyState == 4) {
if(xmlhttp.status == 200) {
    document.getElementById("message").innerHTML=xmlhttp.responseText;
}
else {
alert("Error during AJAX call. Please try again");
}
}}'

I was wondering if someone can see why it's not passing the value of lat & lng to the AJAX function.

Any help would be appreciated. :)

Laura

Answer 1

Maybe we can't see all the code but it looks like latitude and longitude are function scoped to locationSuccess. So when you try to access them in ajaxFunction they will get the default values.

Also, you don't need to do all that getXMLObject fun. On webkit browsers like in Android, iOS and BlackBerry you just need to do:

var xmlhttp = new XMLHttpRequest();

And finally since you are probably running this off of the file:// protocol you will have to look for a status code of 0 which is analogous to 200 in this case.

function handleServerResponse() {
    if (xmlhttp.readyState == 4) {
        if(xmlhttp.status == 200 || xmlhttp.status == 0) {
            document.getElementById("message").innerHTML=xmlhttp.responseText;
        }
    }
    // etc.
}

Answer 2

Why not just use a jQuery ajax call? Your code is marked up for IE6... Since this in tagged in phonegap I would assume you have access to using newer methods of doing things.

I would suggest using jQuery ajax..

function ajaxFunction() {
$.ajax({
  url:'http://www.lauracrane.co.uk/app/rec/location.php',
  type:'POST',
  data:'lat='+lat+'&long='+long,
  success:function(d){
    console.log(d);
  },
  error(w,t,f){
    console.log(w+' '+t+' '+f);
  }
});
}