javascript - 使用回调打印json数据

Question

尝试从 php 文件获取我的 json 数据并显示。

到目前为止，我能够使用 ajax 请求数据并将数据记录到控制台。 (至少有一件事似乎在起作用)。

然后我尝试使用回调，以便我的脚本在执行显示函数之前等待数据。我一步一步地遵循了这个教程，但我一定是做错了什么，因为在检查器中它抛出了一个错误，我的 jsonData 没有定义。

然后我尝试显示数据，但如果回调无法正常工作，它将无法工作。

我将尝试解释我所做的事情:

1.我在运行脚本之前等待文档加载

$(document).ready(scriptWrapper);

2。我用一个函数把整个东西包起来

function scriptWrapper(){
  displayJson();
}

3。我用我的回调参数启动函数

function requestJson(_callback){ 

4.使用 ajax 从我的 php 文件请求我的数据

$.ajax({
    url: "/test/senate.php",
    success: result,
});

5.将数据的结果发送到console.log

function result(jsonData){
    console.log (jsonData);
}

6.这标志着回调结束

_callback();

7.启动displayJson函数

function displayJson(){

8.以 showData() 函数作为参数执行 requestJson()，我认为这意味着 showData 将在执行前等待回调。

requestJson(showData());

9.这是将在我的输出 div 中显示 json 数据的函数。

function showData(){
    $(".output").append(jsonData);
}

如有任何见解，我们将不胜感激!

我这里有现场版congress.digitango.com/test/results.php

完整代码为:

<div class="output"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
function scriptWrapper(){
  displayJson();
}

function requestJson(_callback){ 
  $.ajax({
    url: "/test/senate.php",
    success: result,
  });

  function result(jsonData){
    console.log (jsonData);
  }
  _callback();
}

function displayJson(){
  requestJson(showData());
  function showData(){
    $(".output").append(jsonData);
  }
}
$(document).ready(scriptWrapper);  
</script>

Answer 1

您的整个代码都是样板文件。空函数除了调用其他函数、相互调用和回调之外什么都不做……这是令人困惑和毫无意义的。你过度工程化了。不要那样做。

你可以将你写的所有内容压缩成 3 行。

<div class="output"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript">
  $.getJSON("/test/senate.php").done(function (data) {
    $(".output").append(data);
  });
</script>