JavaScript的集合元素的属性数据返回JSON数据空[重复]

Question

这个问题已经在这里有一个答案：

• How do I return the response from an asynchronous call? 36个回答

我是一个新手的JQuery / JavaScript的用户有一个问题，不明白为什么我的div的数据属性是保存/检索DOM数据后空。我需要一点点帮助，如果可能的话用例子来解释什么是我做错了。我花了几个小时，在此，看不到光。

    // HTML
    <div id="outer">
        <div id="mydiv" data-myval=""></div>
    </div>

    // JS file body

    function getSomeData(){
        var url = "http://ip-api.com/json";
        $.ajax({
            url: url,
            dataType: "json",
            cache: false,
        }).done(function(data) {
            //var myjson = data;
            var myjson = JSON.stringify(data);
            $("#mydiv").attr("myval", data);  // setter
        }, "json");
    }


    $(document).ready(function()
    { 
        getSomeData();

        // get json data from attr data-myval
        //var object = JSON.parse(myjson);
        var myjson = $("#mydiv").data();  //getter

        alert(myjson);  

        if(typeof object === 'undefined') 
        {
          alert('No data found!');

        }
        else
        {
            // do something
            var lat = object.lat;
            var lng = object.lon;

            // more codes
        }
    }

Answer 1

首先，要明白，AJAX请求异步运行是非常重要的。这意味着，当您的浏览器等待响应的JavaScript将继续执行你的代码。为了形象化：

JS execution  
|
|            getSomeData() runs, sends AJAX request to -------> server
|                  |                                               |
|                  V                                               |
|            var myjson = $("#mydiv").data(); //not yet set        |
|                                                                  |
|                                                                  |
|                                                                  |
|                                                                  |
|                                                                  V
|           .done(function(data) {}); //executes upon response <--response
V

所以，如果你想在你的data-myval检索数据，你只能做这样你的AJAX调用完成后。有一个在得到这个数据，你叫getSomeData()后没有意义的。你可以例如获取数据的用户点击后的东西。

其次，你必须设置与.data()功能，而不是.attr()函数的数据属性。

实施例的解决方案：

// HTML
    <div id="outer">
        <div id="mydiv" data-myval=""></div>
    </div>
    <button id="clicker">Click me!</button>

// JS file body

    function getSomeData(){
        var url = "http://ip-api.com/json";
        $.ajax({
            url: url,
            dataType: "json",
            cache: false,
        }).done(function(data) {
            $("#mydiv").data("myval", data);  // setter
        }, "json");
    }


    $(document).ready(function()
    { 
    getSomeData();


    $("#clicker").click(function(e) {
        var data = $("#mydiv").data("myval");  //getter
        alert(data.exampleItem);
    });