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;

在 Firebug 中很难看到错误，因为它来去匆匆，但不知何故它看起来像是 geocode.php 中的内部服务器错误。

另外，当我提交表单时，我的 url 中会出现奇怪的 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;
});
});