はてなブログでjQueryを学ぼう４　ajaxのloadを使ってみた

jQueryで色々な動作実験を、はてなブログ内で実験中。

３回目でajaxを使った、他のブログページを読み込む実験をしました。

前回の結果

結果は下記の通りソースが丸ごと表示。
読込みは成功しています。でもこれでは利用できません。

<!DOCTYPE html> <html lang=\"ja\" data-avail-langs=\"ja en\" data-page=\"entry\" data-static-domain=\"https://blog.st-hatena.com\" data-blog=\"motagp.hatenablog.com\" data-blog-name=\"motogp fun\" data-blogs-uri-base=\"http://motagp.hatenablog.com\" data-globalheader-color=\"b\" data-globalheader-type=\"pc\" data-author=\"motagp\" data-version=\"70cfc4db54d72030cbd921f9c2e809a1\" data-blog-comments-top-is-new=\"\" data-device=\"pc\" data-plus-available=\"\" data-admin-domain=\"http://blog.hatena.ne.jp\" data-brand=\"hatenablog\" data-has-touch-view=\"1\" itemscope itemtype=\"http://schema.org/Article\" > <head prefix=\"og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#\"> <meta charset=\"utf-8\"/> <meta http-equiv=\"X-UA-Compatible\" content=\"IE=7; IE=9; IE=10; IE=11\" /> <title>検証用ページ - motogp fun</title> <link

そんな訳で、今回は必要な部分のみ表示できるかの実験。

読込むページは下記

<a href="http://motagp.hatenablog.com/entry/test-data01" data-mce-href="http://motagp.hatenablog.com/entry/test-data01">検証用ページ - motogp fun</a>motagp.hatenablog.com

利用する機能 ajax（非同期通信技術）

idで名前を付けた特定の部分のみ読み込みます。
$('#表示する場所').load('読み込むurl #idを指定'); この行を追加、これだけで指定したIDの内容を読み込めます。
簡単でした。

------------------------------------

$('#text2').load($('#inurl').val() + " #dol");

----------------------------

読み込まれるブログ（html）にidを決めときます。
<p>OLタグにID="dol"と指定 </p>
<ol id="dol">
<li>ol-li １のデータ</li>
<li>ol-li ２のデータ</li>
<li>ol-li ３のデータ</li>
</ol>

以下テスト

読込むアドレスを指定（自分のブログしか読込めません）

結果発表

クリックしないと何も起きないよ

+++++++ ここに結果を表示 +++++++++

今回のソース　試したい人は自分のブログにコピペして実験して下さい


<!-- jQuery 2.0.2 -->
<script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js\"></script>
<div>jQueryで色々な動作実験を、はてなブログ内で実験中。</div>
<div>３回目でajaxを使った、他のブログページを読み込む実験をしました。</div>
<h4>前回の結果</h4>
<div>結果は下記の通りソースが丸ごと表示。<br />読込みは成功しています。でもこれでは利用できません。</div>
<pre><code>&lt;!DOCTYPE html&gt; &lt;html lang=\\\"ja\\\" data-avail-langs=\\\"ja en\\\" data-page=\\\"entry\\\" data-static-domain=\\\"https://blog.st-hatena.com\\\" data-blog=\\\"motagp.hatenablog.com\\\" data-blog-name=\\\"motogp fun\\\" data-blogs-uri-base=\\\"http://motagp.hatenablog.com\\\" data-globalheader-color=\\\"b\\\" data-globalheader-type=\\\"pc\\\" data-author=\\\"motagp\\\" data-version=\\\"70cfc4db54d72030cbd921f9c2e809a1\\\" data-blog-comments-top-is-new=\\\"\\\" data-device=\\\"pc\\\" data-plus-available=\\\"\\\" data-admin-domain=\\\"http://blog.hatena.ne.jp\\\" data-brand=\\\"hatenablog\\\" data-has-touch-view=\\\"1\\\" itemscope itemtype=\\\"http://schema.org/Article\\\" &gt; &lt;head prefix=\\\"og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#\\\"&gt; &lt;meta charset=\\\"utf-8\\\"/&gt; &lt;meta http-equiv=\\\"X-UA-Compatible\\\" content=\\\"IE=7; IE=9; IE=10; IE=11\\\" /&gt; &lt;title&gt;検証用ページ - motogp fun&lt;/title&gt; &lt;link 
</code></pre>
<div><br />そんな訳で、今回は必要な部分のみ表示できるかの実験。</div>
<div> </div>
<div>読込むページは下記 </div>
<p><iframe class=\"embed-card embed-blogcard\" style=\"display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;\" title=\"検証用ページ - motogp fun\" src=\"http://motagp.hatenablog.com/embed/test-data01\" frameborder=\"0\" scrolling=\"no\"><a href=\"http://motagp.hatenablog.com/entry/test-data01\" data-mce-href=\"http://motagp.hatenablog.com/entry/test-data01\">検証用ページ - motogp fun</a></iframe><cite class=\"hatena-citation\"><a href=\"http://motagp.hatenablog.com/entry/test-data01\">motagp.hatenablog.com</a></cite></p>
<p> </p>
<h4>利用する機能 ajax（非同期通信技術）</h4>
<p>idで名前を付けた特定の部分のみ読み込みます。<br />$(\'#表示する場所\').load(\'読み込むurl #idを指定\'); この行を追加</p>
<p>successは通信が成功した時に動作する処理を記載します。</p>
<p>------------------------------------</p>
<p>$.ajax({<br />　url: ’アドレス’,<br />　type: \'GET\',<br />　dataType: \'html\',<br />　　success: function() { <br />　　　$(\'#text2\').load($(\'#inurl\').val() + \" #dol\"); <br />　　},</p>
<div> });</div>
<pre><code>----------------------------<br />読み込まれるブログ（html）にidを決めときます。
&lt;p&gt;OLタグにID=\"dol\"と指定 &lt;/p&gt;
&lt;ol id=\"dol\"&gt;
&lt;li&gt;ol-li １のデータ&lt;/li&gt;
&lt;li&gt;ol-li ２のデータ&lt;/li&gt;
&lt;li&gt;ol-li ３のデータ&lt;/li&gt;
&lt;/ol&gt;
</code>
</pre>
<h4>以下テスト</h4>
<div>読込むアドレスを指定（自分のブログしか読込めません）</div>
<div><input id=\"inurl\" maxlength=\"255\" name=\"inname\" size=\"60\" type=\"text\" value=\"http://motagp.hatenablog.com/entry/test-data01\" /></div>
<div><button id=\"button1\" type=\"button\">このボタンをクリック</button></div>
<h5> 結果発表</h5>
<p id=\"text1\">クリックしないと何も起きないよ</p>
<p id=\"text2\">+++++++ ここに結果を表示 +++++++++</p>
<p> </p>
<!-- script -->
<script type=\"text/javascript\">// <![CDATA[
(function($) {
    
$(function() {
    $(\'#button1\')
      //var $datas;
      .on(\'click\', function(){
        if(document.getElementById(\"button1\").textContent==\"元に戻す\"){
              document.getElementById(\"text1\").style.color=\"black\";
              document.getElementById(\"text1\").textContent=\"クリックしないと何も起きないよ\";
              document.getElementById(\"button1\").textContent=\"このボタンをクリック\";
              document.getElementById(\"text2\").textContent=\"----------------------------------\";
        }else{
              document.getElementById(\"text1\").style.color=\"red\";
              document.getElementById(\"text1\").textContent=\"読込実行しました\";
              document.getElementById(\"button1\").textContent=\"元に戻す\";

              $(\'#text2\').load($(\'#inurl\').val() + \" #dol\"); 
        }
    });
});
})(jQuery);
// ]]></script>