0

我有一个现有的数据库，其中包含城市、州、邮编、纬度、经度、县：40,000 多条记录。

我可以毫无问题地使用它。

我现在要做的是，当用户在表单中输入邮政编码时，查询数据库并获取相关的城市、州、纬度、经度和县。

该脚本执行“ONBLUR”但没有任何反应。我验证了我正在正确调用该函数，因为我插入了一个window.alert("Test").

这是javascript：

function updateCityState()
   {
   {
    var zipValue = document.getElementById('zipcode').value;
    if(zipValue!="")
    {
        var url = "admin/includes/zip_check.php";
        var param = "?zip=" + escape(zipValue);

        var ajax = getHTTPObject();

        ajax.open("GET", url + param, true);
        ajax.onreadystatechange = handleAjax;
        ajax.send(null);
    }
}
}
 function handleAjax()
{
if (ajax.readyState == 4)
{
    citystatearr = ajax.responseText.split(",");

    var city = document.getElementById('city');
    var state = document.getElementById('state');

    city.value = citystatearr[0];
    state.value = citystatearr[1];
}
 }

我的“zip_check.php”文件看起来像这样......当我手动查询 zip_check 时......

include_once("../db.php");
$query = "SELECT * FROM `cities_extended` WHERE `zip`=".mysql_real_escape_string($_GET['zip']);
$result = mysql_query($query) or die(mysql_error());


$row = mysql_fetch_array($result);
echo $row['city'].",".$row['state_code'];

我是否需要包含 JQuery 之类的东西或我缺少的其他东西才能使它工作？我的语法正确吗？

4

4 回答 4

2

正如@elclanrs 所说，您在function updateCityState(). 其次，你从服务器端发回什么样的数据类型？json、xml、text 或 html，这些信息非常重要，您必须谨慎使用。通过实现 AJAX 方法而不是通过 jQuery 等库使用它，您必须确保正确定义响应数据类型、处理响应状态并与多个浏览器兼容。下面的代码片段是一个示例：

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

以这种方式调试并不容易，如果您仍想保留此实现，可以参考this。就个人而言，我建议您使用 jQuery 来开展业务。

于 2013-04-05T03:50:38.250 回答
1

考虑使用 jQuery.ajax 函数，它可以为您完成所有艰苦的工作！请参阅官方 API 文档：http ://api.jquery.com/jQuery.ajax/ 。您的 jQuery 代码可能如下所示：

function updateCityState()
{
    var zipValue = $('#zipcode').val();
    if(zipValue == "")
    {
        alert('enter a zip value!');
    }
    else
    {
        //process ajax request
        var zipcodeRequest = $.ajax({
             type: "GET",
             url: "admin/includes/zip_check.php",
             data: { zip:zipValue }
        });

        zipcodeRequest.done(function(data)
        {
             alert( "You have successfully found your zip code." + data );
             //do something with your data here...
             $('#city').val(data.city);
             $('#state').val(data.state);
        });

        zipcodeRequest.fail(function(jqXHR, textStatus)
        {
             alert( "We could not find your zip code (" + textStatus + ")." );
        });
    }
}

这里有一些更多的 ajax 代码示例可以帮助您弄清楚：

  1. http://www.jquery4u.com/demos/ajax/
  2. http://www.jquery4u.com/function-demos/ajax/
于 2013-04-05T03:46:03.393 回答
0

如果您不想使用 jquery，请尝试使用它，它的简单 ajax 但与您的实现不同

function updateCityState()
{
var xmlhttp;
var zipValue = document.getElementById('zipcode').value;  
if (zipValue=="")
  {
    var city = document.getElementById('city');
    var state = document.getElementById('state');

    city.value = "";
    state.value = "";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    citystatearr = xmlhttp.responseText.split(",");

    var city = document.getElementById('city');
    var state = document.getElementById('state');

    city.value = citystatearr[0];
    state.value = citystatearr[1];
    }
  }

xmlhttp.open("GET","admin/includes/zip_check.php?zip="+zipValue,true);
xmlhttp.send();
}
于 2013-04-05T04:31:34.703 回答
-1

尝试使用您的 php 文件的确切路径。

var url = "admin/includes/zip_check.php";

类似于：

var url = "http://mysite.com/admin/includes/zip_check.php";
于 2013-04-05T03:41:24.960 回答