web-dev-qa-db-ja.com

jQueryなしの$ .loadと同等

ボタンをクリックすると、Jadeコンテンツを特定のdivにロードしたいと思います。私はjqueryでこれを行う方法を見つけました、それにいくつかの投稿があります、そして本質的に私がしたいのは

$('#div').load('/somePage');

ただし、プロジェクトでjQueryを使用できません。 Vanilla javascriptに同等の機能はありますか？

javascriptjquerynode.jsexpresspug
12
WookieCoder

私はあなたが以下でこれを行うことができると思います。

var request = new XMLHttpRequest();

request.open('GET', '/somepage', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    var resp = request.responseText;

    document.querySelector('#div').innerHTML = resp;
  }
};

request.send();

ちなみに、これはフェッチAPIでも実行できます。

fetch('/somepage')
  .then(function(response) {
    return response.text();
  })
  .then(function(body) {
    document.querySelector('#div').innerHTML = body;
  });

ちなみに、フェッチAPIについて何かを学ぶために このブログ投稿 を読むことができます。

17
Ali BARIN

同じ問題を解決しようとしているときに、 ALi BARINの回答 に基づいてこれを作成しました。これはうまく機能しているようですが、init情報を追加して、もう少し明示的なバージョンです。 querySelectorの代わりにdocument.getElementByIdを使用するロジックがいくつかあります。

/*
 * Replicates the functionality of jQuery's `load` function, 
 * used to load some HTML from another file into the current one.
 * 
 * Based on this Stack Overflow answer:
 * https://stackoverflow.com/a/38132775/3626537
 * And `fetch` documentation:
 * https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch
 * 
 * @param {string} parentElementId - The ID of the DOM element to load into
 * @param {string} htmlFilePath - The path of the HTML file to load
 */
const loadHtml = function(parentElementId, filePath) {
    const init = {
        method : "GET",
        headers : { "Content-Type" : "text/html" },
        mode : "cors",
        cache : "default"
    };
    const req = new Request(filePath, init);
    fetch(req)
        .then(function(response) {
            return response.text();
        })
        .then(function(body) {
            // Replace `#` char in case the function gets called `querySelector` or jQuery style
            if (parentElementId.startsWith("#")) {
                parentElementId.replace("#", "");
            }
            document.getElementById(parentElementId).innerHTML = body;

        });
};
3
Phrancis