jsFiddle jQuery ajax函数不能在onLoad上运行

Question

我在jsFiddle中有一个jQuery ajax函数

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

这可能还是我错过了什么？

这是jsFiddle：

http://jsfiddle.net/djlerman/bbj8k9pe/

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

＆＃13;

＆＃13;

// 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. */

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果您添加快速console.log声明，则会发现您的jsonData未定义...

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

您正在尝试在POST中发送该数据，因此请确保在使用之前初始化数据...虽然该变量已挂起，但设置值的位置不是 - 因此移动您的{{1在你的var jsonData = ...函数调用之前。