從輸入的郵政編碼得到城市和州的狀態javascript

Question

我有一個現有的包含城市，州，拉，拉，長，縣的數據庫：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之類的東西，或者我錯過了其他的東西來運行它？我的語法正確嗎？

Answer 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/

Answer 2

嘗試使用確切的路徑到您的PHP文件。

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

喜歡的東西：

var url = "http://mysite.com/admin/includes/zip_check.php"; 

Answer 3

由於@elclanrs說，你有冗餘{在function updateCityState()。其次，你從服務器端發回什麼樣的數據類型？ JSON，XML，文本或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來做你的生意。

Answer 4

嘗試使用這個，如果你不想使用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(); 
}