jQuery Ошибка запроса AJAX

Question

Я сделал несколько запросов AJAX, используя jQuery в свое время, но по какой-то причине я не могу заставить это работать.

Что мой код делает, спрашивает у пользователя свое местоположение, геокодирует его с помощью API Карт Google и возвращает 5 ближайших магазинов пользователю.

Если я посетил страницу, вызванную запросом ajax в браузере, с параметрами URL, введенными вручную, тогда он работает нормально, например. www.domain.com/storelocator/geocode.php?address=xxxxxx

index.php

<form id="storeform"> 
    <input type="text" id="address" size="50"/> 
    <span><input id="submit" type="image" src="../images/btnsmall.jpg" value="Search" /></span> 
</form> 


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript" src="https://maps.google.com/maps/api/js?libraries=geometry&sensor=false" ></script> 
<script type="text/javascript"> 
$(document).ready(function() { 

    $('#storeform').submit(function() { 
     var address = $('#address').val(); 
     var params = $('#storeform').serialize(); 

     if (address == '') { 
     alert('Please enter a location'); 
     } 

     $.ajax({ 
      url: "geocode.php", 
      data: params, 
      dataType: 'html', 
      type: 'GET', 
      success: function(response){ 
       $('#stores').html(response);   
      } 
     }); 
    }); 
}); 
</script> 

geocode.php

ini_set('display_errors', 1); 
error_reporting(E_ALL); 

$db_conn = mysql_connect('xxxxxx', 'xxxxxx', 'xxxxx') or die('error'); 
mysql_select_db('xxxx', $db_conn) or die('error'); 

$address = $_GET['address']; 
$earth_radius = 3959; 
$ch = curl_init('http://maps.google.com/maps/api/geocode/json?address='.$address.'&sensor=false'); 

curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 
$geocode = curl_exec($ch); 
curl_close($ch); 

$output= json_decode($geocode); 

$lat = $output->results[0]->geometry->location->lat; 
$lng = $output->results[0]->geometry->location->lng; 

$sql = "SELECT *, ($earth_radius * acos(cos(radians($lat)) * cos(radians(latitude)) * cos(radians(longitude) - radians($lng)) + sin(radians($lat)) * sin(radians(latitude)))) AS distance FROM stores HAVING distance < 25 ORDER BY distance LIMIT 5"; 
$result = mysql_query($sql); 
$stores = ''; 

if (mysql_num_rows($result) > 0){ 
    while($row = mysql_fetch_array($result)) 
    { 
     $stores .= $row['town'].' - '.$row['name']; 
     $stores .='<br />'; 
    } 
} 
else { 
    $stores = 'No results!'; 
} 

echo $stores; 

Это трудно увидеть ошибку в Firebug, потому что он приходит и уходит так быстро, но это выглядит как внутренний ошибка сервера в geocode.php как-то.

Кроме того, когда я отправляю свою форму, я получаю странные параметры x и y в своем URL-адресе, например.

http://www.domain.com/store-locator/index.php?x=13&y=11 и я понятия не имею, почему.

Любая помощь будет высоко оценена.

Answer 1

Если вы используете .submit(), как это, он обязательно обновит страницу (скорее всего, пока запрос все еще запущен). Вы должны «вернуть false», чтобы предотвратить это поведение по умолчанию.

$(document).ready(function() { 

$('#storeform').submit(function() { 
    var address = $('#address').val(); 
    var params = $('#storeform').serialize(); 

    if (address == '') { 
    alert('Please enter a location'); 
    } 

    $.ajax({ 
     url: "geocode.php", 
     data: params, 
     dataType: 'html', 
     type: 'GET', 
     success: function(response){ 
      $('#stores').html(response);   
     } 
    }); 

    return false; 
}); 
});