0

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

还有 1 个问题，任何人都可以用更短的方式来思考

转换表（目标节点）

因为这是漫长而复杂的方式，我认为：\

    <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>

和 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>
4

1 回答 1

0

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

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

您可以创建一个parseResponse函数来处理返回的数据，并且可以通过插入脚本标签来执行 AJAX。

问题是您正在与Same Origin Policy发生冲突。

我看到您已将问题更新为使用 jQuery AJAX。这提供了一种jsonp数据类型，这可能比添加脚本标签更容易。

于 2012-07-22T14:06:20.010 回答