Question

我正在使用PHPstorm IDE，并且我正在尝试渲染以下JSON，并且它只会显示<ul></ul>而不会将<li>'s分散到每个函数的HTML中。知道可能是什么问题吗？

感谢。

的script.js：

$(function(){
    $('#clickme').click(function (){
        //fetch json file
        $.ajax({
            url:'data.json',
            dataType: 'json',
            success: function(data){
                var items = [];
                $.each(data, function (key, val) {
                    items.push('<li id=" ' + key + '">' + val + '</li>');
                });
                $('<ul/>', {
                    'class': 'tasks',
                    html: items.join('')
                }).appendTo('body');
            },
            statusCode: {
                404: function(){
                    alert('there was a problem with the server. try again in a few secs');
                }
            }
        });

    });
});

和JSON：

{"id":"1","mesi":"mesima 0","done_bool":"1"},{"id":"2","mesi":"mesima 1","done_bool":"0"},{"id":"3","mesi":"mesima 2 ","done_bool":"1"},{"id":"4","mesi":"mesima 3","done_bool":"1"}

我的HTML只是一个用于显示点击ID的href：

<a href="#" id="clickme">Get JSON</a>

Answer 1

试试这样：

success: function(data){
            var items = '';
            $.each(data, function (key, val) {
                items += '<li id=" ' + key + '">' + val + '</li>';
            });
            ul = $('<ul/>').html(items);
             $('body').append(ul);
        }

用于多个对象

success: function(datas){
            var items = '';
           $.each(datas, function (i,data) {
                $.each(data, function (key, val) {
                    items += '<li id=" ' + key + '">' + val + '</li>';
                });
            });
            ul = $('<ul/>').html(items);
             $('body').append(ul);
        }

输出

<ul>
    <li id=" id">1</li>
    <li id=" mesi">mesima 0</li>
    <li id=" done_bool">1</li>
    <li id=" id">2</li>
    <li id=" mesi">mesima 1</li>
    .
    .
</ul>

Answer 2

<script>
$(document).ready(function(){
    $("button").click(function(){
        $.getJSON("demo_ajax_json.js", function(result){
            $.each(result, function(i, field){
                $("div").append(field + " ");
            });
        });
    });
});
</script>

<button>Get JSON data</button>

使用此方法您可以轻松地在HTML中获取JSON值

Answer 3

试试这个：）

  $.ajax({
            url: 'data.json',
            dataType: 'json',
            success: function(data){

                var html = "<ul>";
                items = data.map(function(obj){
                   html += "<li id='" + obj.id + "'>" + obj.mesi + "</li";
                });
                html += "</ul>";

                $('body').append(html);

Answer 4

我会尝试这样的一些

$(function(){
    $('#clickme').click(function (){
        //fetch json file
        $.ajax({
            url:'data.json',
            dataType: 'json',
            success: function(data){

                // uncomment line below if data is a single JSON     
                // data = [data]

                var items = [];

                // we create a list where we will append the items
                var list = document.createElement("ul");

                data.forEach(function(item){

                    // we create a list item 
                    var listItem = document.createElement("li");

                    // we set the attributes
                    listItem.setAttribute("id", item.id ); // item.id or the property that you need 

                    // we add text to the item
                    listItem.textContent = item.mesi;

                    // We append the list item to the list
                    list.appendChild(listItem);

                });
                // we append the list to the body
                $("body").html(list);

            },
            statusCode: {
                404: function(){
                    alert('there was a problem with the server. try again in a few secs');
                }
            }
        });

    });
});

Answer 5

试试这样：

 $(function() {
    $('#clickme').click(function() {
        // fetch json file
        $.ajax({
            url : 'data.json',
            dataType : 'json',
            // please confirm request type is GET/POST
            type : 'GET',
            success : function(data) {
                // please check logs in browser console
                console.log(data);
                var ulHtml = "<ul>";
                $.each(data, function(key, obj) {
                    ulHtml += '<li id="' + obj.id + '">' + obj.mesi + '</li>';
                });
                ulHtml += "</ul>";
                // please check logs in browser console
                console.log(ulHtml);
                $('body').append(ulHtml);
            },
            error : function(jqXhr, textStatus, errorThrown) {
                console.log(errorThrown);
                alert(textStatus);
            }
        });
    });
});


<button id="clickme">Get JSON data</button>

我记录了json数据并创建了ul html，请检查浏览器控制台中的日志

Answer 6

我不确定您希望如何输出每个项目，因此我提出了一个简单的建议，您可以轻松地将HTML更改为您需要的内容。这是工作代码：

的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
<a href="#" id="clickme">Get JSON</a>
<script>
$(function() {
  $('#clickme').click(function() {
    //fetch json file
    $.ajax({
      url: 'data.json',
      dataType: 'json',
      success: function(data) {            
        var items = [];
        $.each(data, function(key, val) {
          // the HTML output for each item
          var done = (val.done_bool === '1') ? 'true' : 'false';
          items.push('<li id=" ' + val.id + '">' + val.mesi + ': ' + done + '</li>');
        });
        $('<ul/>', {
          'class': 'tasks',
          html: items.join('')
        }).appendTo('body');
      },
      statusCode: {
        404: function() {
          alert('there was a problem with the server. try again in a few secs');
        }
      }
    });

  });
});
</script>
</body>
</html>

data.json

[{"id":"1","mesi":"mesima 0","done_bool":"1"},{"id":"2","mesi":"mesima 1","done_bool":"0"},{"id":"3","mesi":"mesima 2 ","done_bool":"1"},{"id":"4","mesi":"mesima 3","done_bool":"1"}]

我还创建了一个__jsfiddle__，因此您可以直接测试它。（使用Mockjax库模拟AJAX调用）：https://jsfiddle.net/dh60nn5g/

很高兴知道：
如果您尝试从其他域加载JSON，则可能需要配置CORS（跨源资源共享）：
https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

Answer 7

这不应该是GET请求吗？我认为你错过了Ajax请求的方法。你应该添加

equal_to(0, 0);

到你的ajax请求。我认为在制作ajax请求时这是一个大问题。

JSON到HTML不通过ID呈现为HTML

7 个答案: