嘗試使用Ajax處理XML

Question

我編寫了一個代碼，它從Harvard Uni生成XML文件並將其放入下拉列表中，接下來您可以從列表中選擇一個課程，它將生成一個包含課程詳細信息的表格。

 <script type="text/javascript" src="Script/jquery-1.7.2.js"></script> 
    <script type="text/javascript"> 
    $('#button').click(function() { 
     document.getElementById("span").style.visibility = "visible"; 
     document.getElementById("button").style.visibility = "hidden"; 
     $.ajax({ 
      type: "GET", 
      url: "Harvard.aspx?field=COMPSCI", 
      success: function (data) { 
       var courses = data.documentElement.getElementsByTagName("Course"); 
       var options = document.createElement("select"); 
       $(options).change(function() { 
        ShowCourseDetails(this); 
       }); 
       for (var i = 0; i < courses.length; i++) { 
        var option = document.createElement("option"); 
        option.value = $(courses[i]).find("cat_num").text(); 
        option.text = $(courses[i]).find("title").text(); 
        options.add(option, null); 
       } 
       document.getElementById("selectDiv").appendChild(options); 
       document.getElementById("span").style.visibility = "hidden"; 
      } 
     }); 
    }); 
    function ShowCourseDetails(event) { 
     // get the index of the selected option 
     var idx = event.selectedIndex; 
     // get the value of the selected option 
     var cat_num = event.options[idx].value; 
     $.ajax({ 
      type: "GET", 
      url: "http://courses.cs50.net/api/1.0/courses?output=xml&&cat_num=" + cat_num, 
      success: function (data) { 
       $("#TableDiv").html(ConvertToTable(data.documentElement)); 
      } 
     }); 
    } 
    function ConvertToTable(targetNode) { 
     targetNode = targetNode.childNodes[0]; 
     // first we need to create headers 
     var columnCount = 2; 
     var rowCount = targetNode.childNodes.length 
     // name for the table 
     var myTable = document.createElement("table"); 
     for (var i = 0; i < rowCount; i++) { 
      var newRow = myTable.insertRow(); 
      var firstCell = newRow.insertCell(); 
      firstCell.innerHTML = targetNode.childNodes[i].nodeName; 
      var secondCell = newRow.insertCell(); 
      secondCell.innerHTML = targetNode.childNodes[i].text; 
     } 
     // i prefer to send it as string instead of a table object 
     return myTable.outerHTML; 
    } 
</script> 

和身體：

<div id="main"> 
      <div class="left"> 
       <input id="button" type="button" value="Get all science courses from HARVARD"/> 
       <br /> 
       <span id="span" style="visibility: hidden">Downloading courses from harvard....</span> 
       <div id="selectDiv"></div> 
       <div id="TableDiv"></div> 
      </div> 
     </div> 

和我所得到的下拉僅在下拉列表中所有行「不確定」，可有人可以看到我寫的代碼問題？

10X很多提前:)

Answer 1

工作的jsfiddle：http://jsfiddle.net/3kXZh/44/

嗯，我發現一對夫婦的問題..

首先，我要遠離設置 「點擊」 走在HTML。你想要將你的動作層與你的內容層分開。

由於您使用jQuery無論如何，試試這個：

$('#button').click(function() { 
    /* function loadXMLDoc contents should go here */ 
}); 

，並更改：

<input id="button" type="button" onclick="loadXMLDoc()" value="Get all sci..."/> 

要：

<input id="button" type="button" value="Get all sci..." /> 

要在解決您立即問題JavaScript，請從以下位置更改loadXMLDoc函數：

option.value = courses[i].getElementsByTagName("cat_num")[0].text; 
option.text = courses[i].getElementsByTagName("title")[0].text; 

這樣：

option.value = $(courses[i]).find("cat_num").text(); 
option.text = $(courses[i]).find("title").text(); 

這應該是足以讓你從那裏創建表。