How to use POST in ajax - html

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