尝试使用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(); 

这应该是足以让你从那里创建表。