我可以用等效的 fetch() 调用替换 jQuery.load() 单行代码吗？

Question

I have a page that uses the jQuery one liner

$('#id').load('/url');

to load a fragment into the DOM at a specific place.

If I want to remove the dependency on jQuery, is there an easy alternative way to do this — possibly with the relatively new fetch() API?

Answer 1

Do it like so:

fetch('/url')
  .then(response => response.text())
  .then(value => {
    document.getElementById('id').innerHTML = value
  });

Answer 2

Almost a one liner:)

;(async () => {
    document.getElementById('id').innerHTML = await (await fetch('/url')).text();
})();

to put it to some practical use you'd have at least to check the response code, so I'd first refactor it like this

;(async () => {
    let res = await fetch('/url');
    if(res.ok){
        document.getElementById('id').innerHTML = await res.text();   
    }
    else { ... }
})();

error handling is still missing, but I'm sure you get the picture:)

Answer 3

You can do like this:

fetch('/method')
.then(response=> response.text())
.then(res => { document.getElementById('id').innerHTML = res; });