javascript - JSON 到 HTML 不通过 ID 呈现为 HTML

Question

我正在使用 PHPstorm IDE，我正在尝试呈现以下 JSON，但它卡住了，只显示 <ul></ul>不吐出<li>'s将每个函数放入 HTML。知道可能是什么问题吗？

谢谢。

脚本.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

<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 值