読者です 読者をやめる 読者になる 読者になる

motogp fun

motogp ファンによる、モトgp 結果、モトgp日程を報告するブログ、ガジェットネタも

はてなブログでjQueryを学ぼう5 ajaxでエラーにも対応してみました

ソフト開発
jQueryで色々な動作実験を、はてなブログ内で実験中。
4回目でjQueryのload関数を使った、ブログの読み込み実験をしました。
不要な情報は要らないのでidで指定した部分のみ読込みました。

前回の結果

ol-li 1のデータ
ol-li 2のデータ
ol-li 3のデータ

簡単に表示できました。
但し、読込先のアドレスを間違うと何も起きません。
読込み失敗のエラー処理を追加したいので、今回からajax関数を使います。
 
読込むページは下記 

motagp.hatenablog.com

 

利用する機能 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 1のデータ
ol-li 2のデータ
ol-li 3のデータ
</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">&lt;a href="http://motagp.hatenablog.com/entry/test-data01" data-mce-href="http://motagp.hatenablog.com/entry/test-data01"&gt;検証用ページ - motogp fun&lt;/a&gt;</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>
&lt;!-- jQuery 2.0.2 --&gt;

</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>