Javascript 使用JSON输入

我正在尝试使用AJAX获取JSON输入，并将其加载到select控件中。 但当我运行它时：\它停留在“下载食谱…”上。 有人看到问题了吗？（我尝试了几项更改，但到目前为止没有任何效果）

还有一个问题谁能想出一个更短的方法来做这件事

可转换（targetNode）

因为这是一条漫长而复杂的道路，我认为：\

    <script type="text/javascript">
             function loadXMLDoc() {
                 var xmlhttp;
                 document.getElementById("span").style.visibility = "visible";
                 document.getElementById("span1").style.visibility = "hidden";
                 document.getElementById("button").style.visibility = "hidden";
                 xmlhttp = new XMLHttpRequest();
                 xmlhttp.onreadystatechange = function () {
                     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                         result = xmlhttp.responseText;
                         result = eval('(' + result + ')');
                         txt = "<select onchange='ShowRecipeDetails(this)'>";
                         for (i = 0; i < result.length; i++) {
                             txt = txt + "<option VALUE=" + result[i].recipe + ">" + result[i].recipe + "</option>";
                         }
                         txt = txt + "</select  >";
                         document.getElementById("span").style.visibility = "hidden";
                         document.getElementById("span1").style.visibility = "visible";
                         document.getElementById("myDiv").innerHTML = txt;
                     }
                 }
                 xmlhttp.open("POST", "http://food.cs50.net/api/1.3/menus?meal=BREAKFAST&sdt=2011-03-21&output=json", true);
                 xmlhttp.setRequestHeader("Content-Type", "application/json; charset=utf-8");
                 xmlhttp.send();
             }
             function ShowRecipeDetails(event) {
                 // get the index of the selected option 
                 var idx = event.selectedIndex;
                 // get the value of the selected option 
                 var field = event.options[idx].value;
                 $.ajax({
                     type: "GET",
                     url: "http://food.cs50.net/api/1.3/recipes?&output=json&id=" + field,
                     success: function (data) {
                         $("#TableDiv").html(ConvertToTable(data[0]));
                     }
                 });
             }
             function ConvertToTable(targetNode) {
                 var table = "<table border = 1 borderColor =green>";
                 table += "<tr>";
                 table += "<td>" + "ID" + "</td>";
                 table += "<td>" + targetNode.id + "</td>";
                 table += "</tr>";
                 table += "<td>" + "Ingredients:" + "</td>";
                 table += "<td>" + targetNode.ingredients + "</td>";
                 table += "</tr>";
                 table += "<td>" + "Name:" + "</td>";
                 table += "<td>" + targetNode.name + "</td>";
                 table += "</tr>";
                 table += "<td>" + "Size:" + "</td>";
                 table += "<td>" + targetNode.size + "</td>";
                 table += "</tr>";
                 table += "<td>" + "Unit" + "</td>";
                 table += "<td>" + targetNode.unit + "</td>";
                 table += "</tr>";
                 table += "<td>" + "VEGETARIAN:" + "</td>";
                 table += "<td>" + targetNode.VEGETARIAN + "</td>";
                 table += "</tr>";
                 table += "</tr>";
                 table += "</table>"
                 return table;
             }
 </script>

函数loadXMLDoc（）{
var-xmlhttp；
document.getElementById（“span”）.style.visibility=“可见”；
document.getElementById（“span1”）.style.visibility=“hidden”；
document.getElementById（“按钮”）.style.visibility=“隐藏”；
xmlhttp=新的XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==4&&xmlhttp.status==200）{
结果=xmlhttp.responseText；
结果=评估（“（“+结果+”）”）；
txt=“”；
对于（i=0；i

以及HTML：

<button id="button"  type="button" onclick="loadXMLDoc()" >Get all recipes</button>
<br />
<span id="span" style="visibility:hidden">Downloading the recipes....</span>
<span id="span1" style="visibility:hidden">Please choose a recipe ID to view</span>
<div id="jsonDiv"></div>
<div id="myDiv"></div>
<div id="TableDiv"></div>

获取所有配方


下载食谱。。。。
请选择要查看的配方ID

HarvardFood API还提供了JSONP版本。因此，如果您将URL更改为：

http://food.cs50.net/api/1.3/menus?meal=BREAKFAST&sdt=2011-03-21&output=jsonp&callback=parseResponse

您可以创建一个

parseResponse

函数来处理返回的数据，还可以通过插入一个脚本标记来实现AJAX

问题是，你正在与公司发生冲突

---

---

我看到您已经将问题更新为使用jQueryAjax。它提供了一个

jsonp

数据类型，这可能比添加一个脚本标记更容易put

console.log（data）

，这样您就可以看到返回的对象类型。为什么要混合使用纯

XMLHTTPrequest

s和jQuery？将jQuery用于这两个方面，事情会更简单。也就是说，代码中有一些奇怪的东西，比如在不发送任何数据的情况下发出POST请求，或者使用

eval

解析Ajax响应……您的脚本所在的域是

food.cs50.net

吗？如果没有，这将永远不会工作，您将得到安全错误，因为。我相信您想要使用的是，它不使用XHR。我不知道如何使用JSONP或PraserResponse，但我会检查并尝试。10x:）@SigmaOmega：如果您使用jQuery进行呼叫，它会自动为您处理。您只需告诉它这是一个JSONP调用。不过，理解实际发生的事情还是很好的。@SigmaOmega-使用jQuery，您不需要特定的

parseResponse

函数。从这个角度来看，JSONP只是处理跨域请求问题的一种方法。