从 JSON-Server 获取数据到本地 JQuery

Question

本地HTML和JSON-服务器数据。从 JSON-Server 获取数据并在 JQuery.

中使用它

在 Kevin B 和 Sirko 的帮助下解决。留下JS(JQuery)方便以后复制

var i = 0;
var output;

$("#send").click(function(e) {
    $.getJSON("http://localhost:3000/db", function(data) {})
        .done(function(json) {
            $.each(json, function(key, val) {
                output+= '<p>name=' + json[i].name + '</p>';
                i++;
            });
            $("#paragraph").append(output);
        })
        .fail(function(jqxhr, textStatus, error) {
            var err = textStatus + ", " + error;
            console.log("Request Failed: " + err);
        });

});

Answer 1

考虑以下因素。

$(function() {
  $("#send").click(function(e) {
    console.log("Send clicked.");
    $.getJSON("./empleados", function(data) {
      console.log("Getting Items");
      var list = $("<ul/>", {
        class: "my-new-list"
      }).appendTo(".tablaemple");
      $.each(data, function(i, item) {
        var row = $("<tr>", {
          "data-nomina": item.nomina
        }).appendTo(list);
        $("<td>").html(item.nomina).appendTo(row);
        $("<td>").html(item.apellido + ", " + item.nombre).appendTo(row);
        $("<td>").html(item.base).appendTo(row);
        $("<td>").html(item.funcion).appendTo(row);
        $("<td>").html(item.flota).appendTo(row);
        $("<td>").html(item.tipoescalafon).appendTo(row);
      });
    });
  });
});

您的 URL 路径应该是相对的，否则您可能会遇到 CORS 问题。

这将创建一个行，然后为 data 中的每个项目添加单元格。

请测试这个和post你的结果。

从 JSON-Server 获取数据到本地 JQuery

Getting data from JSON-Server to local JQuery

jquery

json

json-server