jQuery AJAX请求错误

Question

我在我的时间使用jQuery完成了一些AJAX请求，但由于某种原因，我无法让这个工作。

我的代码所要做的就是向用户询问他们的位置，使用Google Maps API对其进行地理编码并将最近的5家商店返回给用户。

如果我通过手动输入的URL参数访问浏览器中的ajax请求所调用的页面，那么它工作正常， 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; 

很难看到萤火虫的错误，因为它来得快，去得这么快，但它看起来像一个内部不知怎的，geocode.php中的服务器错误。

此外，当我提交我的表单时，我的网址中会出现奇怪的x和y参数，例如

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; 
}); 
});