时间戳

首页 > 解决方案 > JavaScript设置元素属性数据返回json数据为空

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

问题描述

我是一个新手 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
        }
    }

标签： javascriptjqueryjsonajax

解决方案

首先，了解 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

因此，如果您想检索 .js 中的数据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);
    });

推荐阅读