How to use POST in ajax

Question

I created a page where after loading the data will appear. I am using github url and ajax POST. But the data is not showing. What should I fix from the code that I have made?

<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

Consider the following.

$(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);
  });
}

As GitHub is not apart of the same domain, you may encounter CORS issues. If so, you might consider JSONP.

Answer 2

Why would you use post to a json file. Get method is enough.

$.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;    
    }
});