ページを更新したり、URLを変更したりせずに、HTMLページをロードしたい。たとえば、私がにいてhttp://localhost/sample/home
、お問い合わせページに移動したい場合は、お問い合わせリンクをクリックすると、ページを更新したりURLを変更したりせずに、お問い合わせページのコンテンツが読み込まれます。
これはどのように行うことができますか?
ページを更新したり、URLを変更したりせずに、HTMLページをロードしたい。たとえば、私がにいてhttp://localhost/sample/home
、お問い合わせページに移動したい場合は、お問い合わせリンクをクリックすると、ページを更新したりURLを変更したりせずに、お問い合わせページのコンテンツが読み込まれます。
これはどのように行うことができますか?
jQuery.load()の使用を調べてください。
これにより、URL から HTML を読み込んで、ページ内の要素に表示できます。
したがって、次のようなことができます。
$("body").load("/sample/contactus");
ただし、SEO やアクセシビリティには適していないため、これはお勧めしません。また、他のページ全体に対してHTTPリクエストを作成する必要があるため、ロード時間は短縮されません..
モック HTML:
<div id="links">
<a href="/contactus.html">Contact Us </a>
</div>
<div id="content"></div>
JS:
$(function() {
$("#links > a").click(function(e) {
e.preventDefault(); //so the browser doesn't follow the link
$("#content").load(this.href, function() {
//execute here after load completed
});
});
});
jQuery.load()
- サーバーからデータをロードし、返された HTML を一致した要素に配置します
何かのようなもの :
$('#content').load('ajax/contact.html', function() {
alert('Load was performed.');
});