javascript中的xml解析器與AJAX

Question

我正在創建一個web表單，我想要的是，當有人選擇「狀態」字段形成選擇列表時，將填充「* city lis * t」通過AJAX調用，

還怎麼搭配和只獲取特定狀態

這裏的城市是html代碼

<label for="state">Select State</label> 
        <select id="state"> 
         <option ></option> 
         <option value="virginia">virginia</option> 
         <option value="south dakota">south dakota</option> 
        </select> 

城市名單，將通過AJAX來填充：

<label for="city">Select State</label> 
        <select id="city"> 
         <option ></option> 
        </select> 

XML代碼：

<?xml version="1.0"?> 
<states> 
     <state> 
     <name>virginia</name> 
      <city>virginia city-1</city> 
      <city>virginia city-2</city> 
     </state> 
     <state> 

     <name>south dakota</name> 
      <city>south dakota city-1</city> 
      <city>south dakota city-2</city> 
     </state> 

Ajax代碼：

var request; 

if(window.XMLHttpRequest){ 
    request=new XMLHttpRequest(); 
}else{ 
    request=new ActiveXObject("Microsoft.XMLHTTP"); 
} 



$("#state").change(function(){ 
var data=$(this).val(); 

//url='formProcessor.php?data='+data; 
url='city.xml'; 
request.open('GET',url); 

request.onreadystatechange=function(){ 

    if((request.readyState==4) && (request.status==200)){ 

     var output; 
     var temp 
     var items=request.responseXML.getElementsByTagName('state'); 

     for(var i=0; i < items.length; i++){ 
      //not sure how to Handel the code and match the state and fetch related cities. 
      if(items[i].nodeValue==data){ 
      temp=items[i]; 
      output=temp.childNodes; 

      } 

     } 

    $('form').append(items);//just using this for testing output 
    console.log(items);//just using this for testing output 
    } 

} 

request.send(); 

}); 

有任何在線資源在那裏我能得到我可以解析的州和城市名單？

Answer 1

你可以考慮使用jQuery AJAX來代替，而你把你的步驟，假定它是一個異步調用來加載XML數據，但是因爲你有一個單獨的XML所有的數據，應該加載一次：

var xmlData = null; 
//this is here just to be used as a sample for your real xml 
var sampleXmlData = '<?xml version="1.0"?><states>'; 
sampleXmlData += '<state><name>virginia</name><city>virginia city-1</city ><city>virginia city - 2</city></state>'; 
sampleXmlData += '<state><name>south dakota</name><city>south dakota city-1</city><city> south dakota city - 2</city></state>'; 
sampleXmlData += '</states>'; 

function loadCombo(state) { 
    var city = $("#city"); 
    city.empty(); 
    city.append("<option></option>"); 
    $(xmlData).find("state").filter(function(){ 
     return (jQuery.trim($(this).find("name").text()) == state); 
    }).find("city").each(function(){ 
     var cityName = jQuery.trim($(this).text()); 
     city.append("<option value='" + cityName + "'>" + 
        cityName + "</option>"); 
    }); 
} 
$("#state").change(function() { 
    var state = $(this).val(); 
    var url = 'city.xml'; 
    if (!xmlData) { 
     //you should put your url instead of/
     $.get("/").then(function (data, status) { 
      if (status == "success") { 
       //you should use this line: 
       //xmlData = data; 
       //this line is here just as a sample 
       xmlData = sampleXmlData; 
      } 
      loadCombo(state); 
     }); 
    } 
    else{ 
     loadCombo(state); 
    } 
}); 

這是你的工作DEMO;