はてなブログでjQueryを学ぼう５ ajaxでエラーにも対応してみました
4回目でjQueryのload関数を使った、ブログの読み込み実験をしました。
不要な情報は要らないのでidで指定した部分のみ読込みました。
不要な情報は要らないのでidで指定した部分のみ読込みました。
前回の結果
ol-li １のデータ
ol-li ２のデータ
ol-li ３のデータ
読込むページは下記
利用する機能 ajax（非同期通信技術）
idで名前を付けた特定の部分のみ読み込みます。
urlとidは画面上で指定できるように改造。
idに「box2-inner」を入力するとブログのサイドバーを抽出可能。
------------------------------------
$.ajax({
url: $('#inurl').val(),
dataType: "html",
success:function( data ) {
$("#text2").html($('#'+$('#inid').val(), data).html());
},
error: function(){
$('#text2').text('読み込みエラー');
}
});
----------------------------
以下テスト
読込むアドレスを指定（自分のブログしか読込めません）
IDを指定
結果発表
クリックしないと何も起きないよ
+++++++ ここに結果を表示 +++++++++
今回のソース 試したい人は自分のブログにコピペして実験して下さい
<!-- jQuery 2.0.2 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div>jQueryで色々な動作実験を、はてなブログ内で実験中。</div>
<div>4回目でjQueryのload関数を使った、ブログの読み込み実験をしました。<br />不要な情報は要らないのでidで指定した部分のみ読込みました。</div>
<h4>前回の結果</h4>
<pre><code>ol-li １のデータ
ol-li ２のデータ
ol-li ３のデータ
</code></pre>
<div><br />簡単に表示できました。<br />但し、読込先のアドレスを間違うと何も起きません。<br />読込み失敗のエラー処理を追加したいので、今回からajax関数を使います。</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で名前を付けた特定の部分のみ読み込みます。</p>
<p>urlとidは画面上で指定できるように改造。</p>
<p>idに「box2-inner」を入力するとブログのサードバーを抽出可能。</p>
<p>------------------------------------</p>
<p>$.ajax({<br /> url: $('#inurl').val(),<br /> dataType: "html",<br /> success:function( data ) {<br /> $("#text2").html($('#'+$('#inid').val(), data).html());<br /> },<br /> error: function(){<br /> $('#text2').text('読み込みエラー');<br /> }<br /> });</p>
<p>----------------------------</p>
<pre> </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>IDを指定</div>
<div><input id="inid" maxlength="255" name="inid" size="20" type="text" value="dul" /></div>
<div><button id="button1" type="button">このボタンをクリック</button></div>
<h5> 結果発表</h5>
<p id="text1">クリックしないと何も起きないよ</p>
<p id="text2">+++++++ ここに結果を表示 +++++++++</p>
<p> </p>
<h4>今回のソース 試したい人は自分のブログにコピペして実験して下さい</h4>
<p> </p>
<pre><code>
<!-- jQuery 2.0.2 -->
</code>
</pre>
<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";
$('#text1').text('クリックしないと何も起きないよ');
document.getElementById("button1").textContent="このボタンをクリック";
$('#text2').text('----------------------------------');
}else{
document.getElementById("text1").style.color="red";
$('#text1').text('読込実行しました');
document.getElementById("button1").textContent="元に戻す";
// ----------------------------
$.ajax({
url: $('#inurl').val(),
dataType: "html",
success:function( data ) {
//$('#text2').text(data);
$("#text2").html($('#'+$('#inid').val(), data).html());
},
error: function(){
$('#text2').text('読み込みエラー');
}
});
//$('#text2').load($('#inurl').val() + " #" + $('#inid').val());
}
});
});
})(jQuery);
// ]]></script>
