使用回调打印 json 数据答案

【问题标题】：Using callback to print json data使用回调打印 json 数据
【发布时间】：2018-01-22 16:31:30
【问题描述】：

试图从 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>

【问题讨论】：

标签： javascript json callback

【解决方案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>

【讨论】：

【解决方案2】：

您指定为success 的函数是回调函数。它将使用请求的结果调用：

function requestJson () { 
  $.ajax({
    url: "/test/senate.php",
    success: result // call the 'result' function when you're done
  });

  function result (jsonData) {
    // do something with the data
  }
}

然后你可以这样做：

function requestJson (callback) { // we accept the callback function as the parameter
  $.ajax({
    url: "/test/senate.php",
    success: callback, // call the callback function when you're done
  });
}

function displayJson () {
  requestJson(showData); // use 'showData' as the callback function

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

【讨论】：

【解决方案3】：

以下是我将如何修复和简化代码

<script type="text/javascript">

function scriptWrapper(){
  requestJson();
}

function requestJson(){ 

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

}

function displayJson(jsonData){

  $(".output").append(jsonData);

}

$(document).ready(scriptWrapper);  

</script>

我目前无法运行代码，但您可能还需要更改 $(".output").append(jsonData);到 $(".output").first().append(jsonData);

JQuery's $.ajax documentation has some helpful example of how to use callbacks

【讨论】：