如何在Ajax中使用帖子

Question

我创建了一个页面，加载数据后将出现。我正在使用github url和ajax帖子。但是数据没有显示。我应该从我制作的代码中修复什么？

<div id="content"> 
</div>

window.onload = function(){
    $.ajax({
        type: 'POST',
        url: 'https://raw.githubusercontent.com/bimobaskoro/hewan/main/kucing.json',
        dataType: 'application/json',
        sucess: function (data) {
            html = '<div class="content" id="content"></div>'
            html += '<h1>' + data.judul + '</h1>'
            html += '<p>' + data.isi + '</p>'
            html += '</div>'
            document.getElementById('content').innerHTML += html;
        },
        error: function() {

        }
    });
}

Answer 1

考虑以下内容。

$(function(){
  $.getJSON("https://raw.githubusercontent.com/bimobaskoro/hewan/main/kucing.json", function (data) {
      var html = $("<div>", {
        class: "content"
      });
      $("<h1>").html(data.judul).appendTo(html);
      $("<p>").html(data.isi).appendTo(html);
      $("#content").append(html);
  });
}

由于Github与同一领域不同，因此您可能会遇到CORS问题。如果是这样，您可以考虑 jsonp 。

Answer 2

您为什么要使用帖子到JSON文件。获取方法就足够了。

$.ajax({
    url: 'https://raw.githubusercontent.com/bimobaskoro/hewan/main/kucing.json',
    success: function (data)
    { 
        var html = '<div class="content" id="content">';
        var obj=JSON.parse(data);
        obj.forEach((e)=>{
            html += '<h1>' + e.judul + '</h1>'
            html += '<p>' + e.isi + '</p>'
        });
        
        html += '</div>'
        document.getElementById('content').innerHTML = html;    
    }
});