用AJAX实现javascript中的xml解析器

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

您可以考虑使用xml，并且假设加载jQuery数据是一个异步调用，并采取步骤，但是由于您将所有数据都放在一个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);
    }
});

这是你的工作演示；