等效于不带jQuery的getJSON函数

Equivalent of getJSON function without jQuery

本文关键字：getJSON 函数 jQuery 于不带      更新时间：2023-09-26

如果没有jQuery，这种方法的等价物是什么？

$(function() {
    $.getJSON("datas.json", function(e) {
        var t = [];
        $.each(e, function(e, t) {
            $("div#" + e).text(t)
        })
    })
})

谢谢。

使用纯Javascript，您的代码看起来像这样：

function createElements(elements) {
    // Assuming you get an array of objects.
    elements = JSON.parse(elements);
    elements.forEach(function (element) {
        var div = document.getElementById(element.id);
        div.innerHTML = element.text;
    });
}
var request = new XMLHttpRequest();
request.onload = createElements;
request.open("get", "datas.json", true);
request.send();

或者你可以使用其他很酷的库，比如超级代理，然后你的代码会是这样的：

var request = require('superagent');
function createElements(elements) {
    // Assuming you get an array of objects.
    elements = JSON.parse(elements);
    elements.forEach(function (element) {
        var div = document.getElementById(element.id);
        div.innerHTML = element.text;
    });
}
request.get('datas.json').end(function(error, elements){
    if (!error) {
        createElements(elements);
    }
});

您发布的代码有几个部分。

$(function(){
  ....
});

这相当于jQuery的window.onload = function(){..}

$.getJSON("datas.json", function(e) {
   ..
});

这是jQuery的ajax获取请求，用于XMLHttpRequest

$.each(e, function(e, t) {
   ..
});

这只是对e中的元素执行foreach操作。根据ajax调用返回的内容，您可能需要for循环或for...in循环。

$("div#" + e).text(t)

这设置了一个元素的文本，可能可以用.innerHTML替换。

相关文章：