jsFiddle jQuery ajax 函数在加载时不起作用

Question

我在 jsFiddle

中有一个 jQuery ajax 函数

它在 onlick 中工作
它在页面最初加载时不起作用。

这可能吗？还是我遗漏了什么？

这是 jsFiddle：

我尝试了延迟选项，但没有解决问题。

// Run ajax function onLoad  -- DOESN'T WORK
getNodeViaAjax();

// Run ajax function ON Button click  -- WORKS
$( "#buttonID" ).on( "click", "", function() {
  getNodeViaAjax();
});

// ajax function
function getNodeViaAjax() {
    $.ajax({
  type: 'POST',
        url: '/echo/json/',
        data: {
            json: JSON.stringify( jsonData )
        },
        success: function(data) {
            $('#displayResponse').html(JSON.stringify(data));
        },
        error:function(error){
            alert('there was an error');  
        },
        dataType: 'json'
    });
}


// Data to return via ajax
/* This is an echo of some data sent back via ajax                       */
/* This data should be filtered by nodeID and return only childNodeID's. */
/* vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv. */
var jsonData = {
  "nodeID": {
    "1": {
      "childNodeID": {
        "1.1": {
          "childNodeType": "branch",
          "childData": [
            "1.1: column 1",
            "1.1: column 2"
            ]
        },
        "1.2": {
          "childNodeType": "leaf",
          "childData": [
            "1.2: column 1",
            "1.2: column 2"
            ]
        },
        "1.3": {
          "childNodeType": "leaf",
          "childData": [
            "1.3: column 1",
            "1.3: column 2"
            ]
        }
      }  
    },
    "1.1": {
      "childNodeID": {
        "1.1.1": {
          "childNodeType": "leaf",
          "childData": [
            "1.1.1: column 1",
            "1.1.1: column 2"
            ]
        },
        "1.1.2": {
          "childNodeType": "leaf",
          "childData": [
            "1.1.2: column 1",
            "1.1.2: column 2"
            ]
        }
      }  
    },
    "2": {
      "childNodeID": {
        "2.1": {
          "childNodeType": "leaf",
          "childData": [
            "2.1: column 1",
            "2.1: column 2"
            ]
        },
        "2.2": {
          "childNodeType": "leaf",
          "childData": [
            "2.2: column 1",
            "2.2: column 2"
            ]
        },
        "2.3": {
          "childNodeType": "leaf",
          "childData": [
            "2.3: column 1",
            "2.3: column 2"
            ]
        }
      }  
    }
  }
};
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
/* This is an echo of some data sent back via ajax                       */
/* This data should be filtered by nodeID and return only childNodeID's. */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button id="buttonID">Click to Load ajax</button>
<div id="displayResponse"></div>

Answer 1

如果您快速添加 console.log 语句，您会发现您的 jsonData 未定义...

function getNodeViaAjax() {
    console.log('Running now...' + jsonData);

您正试图在 POST 中发送该数据，因此请确保数据在使用前已初始化...虽然变量已提升，但设置值的位置不是 -所以将 var jsonData = ... 移动到 getNodeViaAjax() 函数调用之前。

jsFiddle jQuery ajax 函数在加载时不起作用

jsFiddle jQuery ajax function not working onLoad

javascript

ajax

jquery

jsfiddle