Question

我正在使用Ajax调用来加载页面上的文章作为数据库的替代，但是我似乎无法弄清楚如何将这个特定的json文件循环到我页面上的可用文章中。数据返回“undefined”或返回解析JSON的错误。这是我试图实现的循环的最新Ajax调用：

    $.ajax({
        type: "GET",
        url: "php/data.json",
        dataType: "json",
        data: {
          'offset': 0,
          'limit': Papery.loadAmount
    },
        success: function(records){
            $.each(records, function(record){
                 $('.articlesFade').append('<article class="collumn"> <h1 class="headline">' + record.title +'</h1><h2 class="headline">'+ record.title_small +'</h2><p>'+ record.article_small +'</p><img src="https://cdn.pixabay.com/photo/2016/02/01/00/56/news-1172463_960_720.jpg"></article>').hide().fadeIn(1000);
             });
        }
    });

该文章应该出现在“文章”div中（连同h1等）。

我的JSON是这样的结构：

var json = [
   {
      "art_id":"1",
      "title":"Bicymple campagne",
      "title_small":"Bicymple everything changes.",
      "article":"Voor het vak \"visuele communicatie\" kregen we de opdracht om een aantal opmerkelijke of rare producten te promoten. Ik en mijn groep kregen het product \"Bicymple\".\r\n\r\n<br><br>\r\nDe Bicymple is een fiets die gebruikt kan voor het los besturen van voor- en achterwiel worden om makkelijk te navigeren door steden, maar ook om stunts op uit te voeren. Als groep was aan ons om een doelgroep, kernwaarden en een aantal unique selling points te koppelen aan de fiets om een campagne te vormen.\r\n\r\n<br><br>\r\nHet eindproduct was een campagne genaamd: \"Bicymple. Everything changes\". Het idee achter de campagne is dat het design van de doorsnee fiets iedere eeuw veranderd, dus deze eeuw vind er weer een verandering plaats: de Bicymple. Dit werd tot uiting gebracht in posters, een landingspage en een moodvideo.\r\n\r\n<br><br>\r\nOp een zelfgemaakte landingspage plaatste we een moodvideo ter ondersteuning van onze campagne. Op de landingspage kon je het thema van de pagina en de muziek onder de moodvideo veranderen door op de verschillende fietsdesigns door de eeuwen heen te klikken. Het was technisch niet van hoge kwaliteit door de middelmatige HTML\/CSS kennis destijds, maar het concept kwam duidelijk over.\r\n\r\n<br><br>\r\nDeze groepsopdracht leerde ik om visuele middelen in te zetten om een product te promoten met een stukje strategie. Onze inspanning werd beloont met een 8.",
      "article_small":"Een schoolopdracht voor het vak visuele communicatie, waar het promoten en re-branden van het product \"Bicymple\" centraal stond. In groepsverband cre&euml;erde we een concept en werkte dit uit tot visuele uitingen.",
      "created_article":"2016-05-24 11:23:21",
      "image_article":"__poster3.jpg,__poster2.jpg,__poster1.jpg,bicymple_landingspage.jpg,bicymple.png",
      "youtube":null
   },
   {
      "art_id":"2",
      "title":"Rascal Games",
      "title_small":"The game is in your hands",
      "article":"Rascal Games was mijn eerste project op Fontys ICT. Met alle kennis van de 4 richtingen (Technology, Media Design, Software Engineering & Business) moesten we in groepsverband een product verzinnen en maken. Met mijn groep hebben we een game genaamd: \"Platemania\" en een console genaamd: \"Digipult\" in het leven geroepen.\r\n<br><br>\r\nOnze groep bestond uit 5 leden die we verdeelde over de richtig die ze het leukste vonden of waar ze het beste in waren. Ik richtte me voornamelijk op Media Design taken zoals de website en promotiemateriaal. \r\n<br><br>\r\nIn de foto's hierboven zie je onze groep met de console en de game op de achtergrond. \r\n\r\n",
      "article_small":"Rascal Games was mijn eerste project op Fontys ICT. Met alle kennis van de 4 richtingen (Technology, Media Design, Software Engineering & Business) moesten we in groepsverband een product verzinnen en maken. Met mijn groep hebben we een game genaamd: \"Platemania\" en een console genaamd: \"Digipult\" in het leven geroepen.",
      "created_article":"2016-05-24 13:00:24",
      "image_article":"rascal_logo.jpg,rascalgroup.jpg,rascalwebsite.jpg,rascal.jpg,plate_mania.jpg,rascal.png",
      "youtube":null
   },
   {
      "art_id":"3",
      "title":"Computer van de toekomst: Vision",
      "title_small":"Een voice recognition AR prototype",
      "article":"Vision is een klein, maar toekomstgericht project voor het vak \"Experience Design\". Het doel van de opdracht was om met behulp van een Arduino en een visualisatie een toekomstbeeld te schetsen voor de computer van de toekomst.  \r\n<br><br>\r\nEen hoop variabelen kome kijken bij het designen van een product dat nog niet zal bestaan voor tenminste 10+ jaar. De grootste design challenge was het designen voor de \"lens\", want wij denken dat we allemaal een lens zullen gebruiken in de toekomst. Omdat een mens 2 ogen heeft en moeilijk kan focussen met iets op de lens moesten we goed nadenken over de applicatie van het product en waar informatie te displayen.\r\n<br><br>\r\nAls Mediadesigner hebben we niet geleerd hoe we om moeteb gaab met een Arduino en C, vandaar dat we gebruik hebben gemaakt van een Arduino library \"EasyVR\" om een voice recognition prototype te kunnen laten zien aan onze docenten samen met een visualisatie. Het prototype herkende de commando's \"Accept\" en \"Deny\" en liet hierbij een groen of rood lampje branden.\r\n<br><br>\r\nHet ging er bij dit project niet om om de beste visualisatie te maken, maar vooral om na te denken over de toekomst en buiten je comfort zone te stappen met een Arduino.\r\n",
      "article_small":"Vision is een klein, maar toekomstgericht project voor het vak \"Experience Design\". Het doel van de opdracht was om met behulp van een Arduino en een visualisatie een toekomstbeeld te schetsen voor de computer van de toekomst.  ",
      "created_article":"2016-05-27 15:49:54",
      "image_article":"stopmotion.jpg,arduinocode.jpg,arduino.jpg,vision.jpg,arduino_small.jpg",
      "youtube":"TV_pRT4fdE0"
   }

我试图循环的文章是：

<article class="collumn">
    <h1 class="headline">TITLE</h1>
    <h2 class="headline">TITLE SMALL</h2>
    <p>'
        ARTICLE
    </p>
    <img src="IMAGE ARTICLE"> 
</article>

我希望这是一个我忽略的小错误，就像大部分时间一样，但这个问题在我的一个功能中仍然存在问题超过3天。

Answer 1

data.json文件是否以您的示例中的var json = ...开头？它应该只包含没有JavaScript的json数据，所以在你的情况下只有{ ... }。
$.ajax支持名为“json”的dataType，在这种情况下我更喜欢使用它。因此，您不必手动执行JSON解析，并且最终会在错误处理程序中解析错误。
.html()将替换所有内容，因此我建议使用.append()代替
我认为你想要GET而不是POST请求，但在这种情况下这应该无关紧要。

Answer 2

dataType不应设置为json而不是text吗？

我认为$.getJSON方法在这里更合适：

$.getJSON("php/data.json", function( data ) {
    var json = $.parseJSON(data);
    for (var i = 0; i < json.length; i++){
        $('.articles').html('<article class="collumn"> <h1 class="headline">'+ json[i].title +'</h1><h2 class="headline">'+ json[i].title_small +'</h2><p>'+ json[i].article_small +'</p></article>').hide().fadeIn(1000);
    };
});

您尝试过哪些调试步骤？它甚至进入了成功处理程序吗？

Answer 3

如果您尝试从服务器上的JSON读取数据，则操作为GET。如果您希望服务器的数据类型为JSON格式，请将dataType设为json

AJAX不会将JSON解析为循环以创建文章

3 个答案: