Question

我是一个有问题的新手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);
    });

JavaScript设置元素属性数据返回json数据为空

1 个答案: