SQLの窓

2015年06月25日


jQuery の css メソッドの引数に、$.get で外部から取得した値をセットして表示を変更する( JSON を Google ドライブに置いて使います )

jQuery の css メソッドは、文字列を一つのペアで渡すか、オブジェクトの内部を css のプロパティと一致させて複数の指定を一度に処理できます。ですから、その部分の定義を JSON 文字列で外部に保存しておいて、$.get で取得して利用するという運用が可能です。
{
    "background-color": "pink",
    "color": "red",
    "padding": "10px",
    "border": "solid 1px #000000",
    "border-radius": "8px"
}

その際、ページと違ったドメインにファイルを置く場合、そのままではセキュリティエラーになる為、参照されるドメイン側で、『access-control-allow-origin:*』を返す必要がありますが、Google ドライブにWEBページを作成する方法 でファイルを置いておけば、もともとそのような設定になっているのですぐ使う事ができます。

 

『Google ドライブ内の css.json』

※ Drive Notepad等の編集アプリで作成して変更する運用が必要になるので注意して下さい


▼ 実際に読み込んで実行しています



$.get は、このサンプルの使い方の場合、【第三引数 ※説明ありにデータの種類を指定できますが、Google ドライブに正しく保存して公開すると、『content-type:application/json』となるのでこの場合は指定する必要がありません。
<style>
.entry input {
    background-color: white;
    color: black;
    padding: 2px;
    border: solid 1px #dddddd;
    border-radius: 0px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function(){

	$("#button").click(function(){
			$.get("https://96c122600b0451b70cd6e48fcec8f876331f788b.googledrive.com/host/0B9Jymqpro6gSflBRZktqSVRqaHA3M2R1S1lIb05NdGNNckFENXJmbGRkX3hsRnZOR1laTG8/css.json", function(data){
			$(".entry input").css( data );
			
		});
	});

	$("#button_reset").click(function(){
		$.get("https://96c122600b0451b70cd6e48fcec8f876331f788b.googledrive.com/host/0B9Jymqpro6gSflBRZktqSVRqaHA3M2R1S1lIb05NdGNNckFENXJmbGRkX3hsRnZOR1laTG8/css_default.json", function(data){
			$(".entry input").css( data );
			
		});
	});
});
</script>
<input type="button" value="CSS適用" id="button">

<form class="entry">
<input type="text" name="sei" id="sei" value="山田"><br>
<input type="text" name="mei" id="mei" value="太郎"><br>
<input type="text" name="simei" id="simei"><br>
</form>

<input type="button" value="解除" id="button_reset">
オンライン実行



タグ:AJAX jquery
posted by lightbox at 2015-06-25 15:17 | jQuery + Ajax | このブログの読者になる | 更新情報をチェックする

2015年05月28日


jQuery の $.get と $.post と PHP の json_encode で、フォームデータをサーバのテキストファイルとして読み書き

$.post は、$( "form" ).serialize() で一般的には容易にサーバへ入力されたデータを送る事ができます。読み込む場合も、jQuery では、JSON データ の MIME が application/json であれば自動的にオブジェクトとして受け取る事ができるので、$.post の第三引数に "json" を指定しなくてもそのまま for( prop in data ) で処理を開始できます。処理そのものも、ラジオボタンとチェックボックス以外は単純にセットする事ができます。

デモページ

jQuery の処理 / entry.js

jQuery で POST した後は、result.php が結果の HTML を返すので、用意しておいた IFRAME に document.write で書き込んでいます。( document.close しなければ、追加書き込みできます )
$(function(){

	// *****************************************************
	// 固定値
	// *****************************************************
	$("#get_default").click(function(){

		$.get( "data.json", function( data ) {
			// JSON から FORM へ自動セット
			for( prop in data ) {
				if ( prop == "in_radio" ) {
					if ( data[prop] == "1" ) {
						$( '[name="' + prop + '"]' ).eq(0).prop( "checked", true );
					}
					else {
						$( '[name="' + prop + '"]' ).eq(1).prop( "checked", true );
					}
					continue;
				}
				if ( prop == "smh" || prop == "gk" ) {
					$( '[name="' + prop + '"]' ).prop("checked", true );
					continue;
				}
				$( '[name="' + prop + '"]' ).val( data[prop] );
			};
		} );

	});

	// *****************************************************
	// JavaScript( jQuery ) で POST する
	// *****************************************************
	$("#post_form").click(function(){

		$.post( 
				"result.php",
				 $( "form" ).serialize(),	// FORM から 自動作成
				function( data ) {
					// 結果の HTML を IFRAME へ表示
					$( "iframe" ).get(0).contentWindow.document.write( data );
					$( "iframe" ).get(0).contentWindow.document.close();
				}
		);


	});

});


FORM の定義 / entry.php

ファイルに書き込むので、クライアント毎のファイルが必要になるので、セッションID をファイル毎に使用しています。

FORM 内のコントロールは、一般的なものを並べています。重要なのは、各コントロールに name 属性が必要なところぐらいです。( id は、jQuery の個別処理を想定して用意していますが、ここでは特に使用していません )

HTML の機能を使って送信する事を想定していないので、type="submit" のボタンはありませんし、method 属性の記述もありません。

※ デモの実行ボタンは、js_button.php の中に記述しています。
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=1280,initial-scale=1.0">
<style>
body {
	line-height:150%;
	background-color: pink;
}
</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>

<!-- 入力処理用の JavaScript -->
<script src="entry.js"></script>

</head>

<body>

<div style="position:relative;">
<?php require_once("js_button.php") ?>


<form>

	氏名 
	<input type="text"
		name="sei"
		id="sei"
		style="width:100px">

	<input type="text"
		name="mei"
		id="mei"
		style="width:100px">

	<br>住所 
	<input type="text"
		name="jyusyo"
		id="jyusyo"
		style="width:240px">

	<br>性別 
	<select name="seibetu"
		id="seibetu">
		<option value="man">男</option>
		<option value="woman">女</option>
	</select>

	<br>
	<label for="in_check1">スマホ</label>
	<input type="checkbox"
		name="smh"
		id="in_check1"
		value="smh">

	<label for="in_check2">ガラケー</label>
	<input type="checkbox"
		name="gk"
		id="in_check2"
		value="gk">
	<br>

	<label for="in_radio1">有り</label>
	<input type="radio"
		name="in_radio"
		id="in_radio1"
		value="1"
		checked>
	<label for="in_radio2">無し</label>
	<input type="radio"
		name="in_radio"
		id="in_radio2"
		value="0">
	<br>
	<input type="hidden" name="himitu" value="秘密">
	<input type="password" name="pass">

	<br>備考 
	<br>
	<textarea name="bikou"
		id="bikou"
		style="width:320px;height:100px;"></textarea>

	<br>
<?php if ( file_exists("data" . session_id() .".json") ) { ?>
	<a href="data<?= session_id() ?>.json" target="result">書き込まれた json</a>
<?php } ?>
	/ <a href="data.json" target="result">data.json</a>

</form>
</div>

<iframe
	src="about:blank"
	name="result"
	frameborder="1"
	scrolling="yes"
	width="600"
	height="450"
	style='border:solid 1px #000;margin-top:10px;'
></iframe>

</body>
</html>


$.post を受け取る PHP / result.php

ここでは、json_encode で $_POST を文字列に変換してファイルにそのまま書き込んでいます。テストがしやすいように、整形して日本語をそのまま読める状態にしています。( JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT )
<?php
session_start();
header("Content-Type: text/html; charset=UTF-8");

// 30分以上前に作成された JSON ファイルの削除
require_once("unlink.php");

// ***********************************************
// デバッグ表示
// ***********************************************
print "<pre>";
$work = print_r( $_POST, true );
print $work;
print "</pre>";

print "<hr>";

// ***********************************************
// JSONフォーマットファイルとして書き込み
// ***********************************************
$json = json_encode( $_POST, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT );
file_put_contents(
	"data" . session_id() . ".json",
	$json
);

?>




タグ:PHP jquery
posted by lightbox at 2015-05-28 22:54 | jQuery + Ajax | このブログの読者になる | 更新情報をチェックする

2014年07月05日


jQuery.get で外部から HTML テキストを取得してアンケートページを作成する

ここでは、どこからでもテキストが取得できるように、Google ドライブを使用しています( access-control-allow-origin:* を返してくれる)。

アンケートに必要な HTML を用意しておいて、jQuery で FORM の定義を完成させます。呼び出し先は単純な PHP を用意していますので、入力した値を $_POST の一覧として表示しています



<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">

$(function(){

	// ajax 呼び出しでは、キャッシュ対策として、URL に時間文字列を追加しています
	$.get("https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/enq/enq_01.txt?"+(new Date()).getTime())
		.done(function(data){
			// 外部から取得したアンケート内容を追加します
			$("#enq_form").append(data);
		})
		.fail( function(){
			console.log("エラー処理");
		} );

	// ajax 呼び出しでは、キャッシュ対策として、URL に時間文字列を追加しています
	$.get("https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/enq/enq_02.txt?"+(new Date()).getTime())
		.done(function(data){
			// 外部から取得したアンケート内容を追加します
			$("#enq_form").append(data);

			// 最後の http 呼び出しの最後で、全体の CSS を設定しています
 			$("#enq_form td")
				.css({
					"padding": "10px"
				});
		})
		.fail( function(){
			console.log("エラー処理");
		} );

	$("#enq_form")
		// 単純に FORM 内に送信ボタンを追加しています
		.append("<input type='submit' name='submit' value='送信'>")
		.attr({
			"method": "post",
			"target": "_blank",

			// FORM の POST データを受け取る URL
			// localhost 等、自由に変更できます
			"action": "http://winofsql.jp/php/enq.php",

			// enq.php の内部が UTF-8 なので設定
			"accept-charset": "UTF-8"
		})

});
</script>

<form id="enq_form"></form>
※ キャッシュ対策として、URL に (new Date()).getTime() を付加しています
※ ここでは、FORM の呼び出し先を UTF-8 で作成しているので、accept-charset を "UTF-8" に設定しています。



タグ:AJAX jquery
posted by lightbox at 2014-07-05 16:15 | jQuery + Ajax | このブログの読者になる | 更新情報をチェックする

2014年02月01日


JavaScript の function を外部に置いて、jQuery の ajax で読み出して SCRIPT 要素の innerHTML で動的に関数定義する

通常の div 等の innerHTML に script 要素ごと文字列設定はできませんが、script 要素に対して innerHTML に関数文字列をセットすると、関数が作成されます。但し、上書きはできないので同名の関数は追加で script 要素が必要になります。

しかし、この script 要素を削除しても、関数そのものはメモリに残るようなので、ここでは script 要素は削除しています。( デベロッパーツールで見てみると script 要素がなくなっていました )

外部のテキストは、Google の仮想ディレクトリを使って設置しています( access-control-allow-origin:* を返してくれます )
<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");

}
</script>
<script type="text/javascript">
function set_script1() {
	$.get( "https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/ajax/functionByAjax.txt", function(data) {
		var obj = document.createElement("script");
		document.body.appendChild(obj);
		obj.innerHTML = data;
		document.body.removeChild(obj);
	});
}
function set_script2() {
	var obj = document.createElement("script");
	document.body.appendChild(obj);
	obj.innerHTML = "function message2(p) { alert(\"2:\"+p) }";
	document.body.removeChild(obj);
}

</script>
<input type="button" value="定義1実行" onclick='set_script1()'>
<input type="button" value="定義2実行" onclick='set_script2()'>
<input type="button" value="実行1" onclick='functionByAjax("こんにちは")'>
<input type="button" value="実行2" onclick='message2("こんにちは")'>
定義1 は、外部からの取り出しです。内容は以下のようになっています。

https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/ajax/functionByAjax.txt
function functionByAjax(a) {
    alert( "\u30e1\u30c3\u30bb\u30fc\u30b8 : (" + a + ") " );
}



posted by lightbox at 2014-02-01 20:29 | jQuery + Ajax | このブログの読者になる | 更新情報をチェックする

2013年11月12日


jQuery : $.get と $.post の内部事情( 正しい引数の与え方 )

$.get も $.post も同じ内容です。$.ajax を呼び出しています。ただ、ドキュメントから解りにくい引数の扱いがここではっきりしています。

まず、第二引数が function かどうかで、$.ajax に渡す引数が変わって来ます。

1) 第二引数が function で無い場合。
  url, data, callback, type という引数の名前の意味のまま $.ajax に渡されます。

2) 第二引数が function の場合。
  url, (第二引数のfunction) と渡されて、data は未定義となります。
  その場合、type は、4番目の引数(type)が優先されて、
  4番目の引数(type)が false( undefined や "" や 0 ) だと、3番目の引数(callback)が使われます。
type = type || callback
jQuery.each( [ "get", "post" ], function( i, method ) {
	jQuery[ method ] = function( url, data, callback, type ) {
		// shift arguments if data argument was omitted
		if ( jQuery.isFunction( data ) ) {
			type = type || callback;
			callback = data;
			data = undefined;
		}

		return jQuery.ajax({
			url: url,
			type: method,
			dataType: type,
			data: data,
			success: callback
		});
	};
});

しかし、戻り値が jQuery.ajax の結果を戻すので、$.get や $.post の後に .done を続ける事ができます


posted by lightbox at 2013-11-12 17:30 | jQuery + Ajax | このブログの読者になる | 更新情報をチェックする

2013年02月19日


jQuery ajax の JSON としての処理と SELECT エレメントの動的作成

jQuery を使った ajax の処理で、サーバー側からコンボボックスの内容を JSON として読みだして、SELECT 要素の中に動的に OPTION 要素を作成します。

dataType : "json"

もどされるデータがそのまま JSON オブジェクトとして jQuery 側で作成してくれていますので、グローバルな変数として window.mydata = result; を実行して再利用可能にしています。

まず、エレメントを作成してから jQuery のオブジェクトに変換して処理しています。

▼ op は DOM のエレメント
op = document.createElement("option");

▼ $(op) は、jQuery のオブジェクト
$(op).attr("value", i+1);

▼ OPTION要素にテキストノードを追加
$(op).append(window.mydata.ken[i]);

▼ SELECT 要素に DOM エレメントを追加
$("#target1").append(op);

最後に、jQuery を使って、コンボボックスの任意のデータを選択状態にしています。これは、一般的な記述で書くと、documnet.getElementById("target1").selectedIndex = 27 になります。

もうひとつのコンボボックス

比較の為に、県のデータを JavaScript の変数として直接定義して処理しています。

<style type="text/css">
#target1 {
	width: 200px;
	border-radius: 6px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {

	$.ajax({
	// javascript の実行分を書いたテキストを呼び出す
		url: "http://lightbox.on.coocan.jp/ken.php",
		cache: false,
		dataType: "json"
	}).done( function( result, textStatus, jqXHR ) {
		// result がそのまま JSON オブジェクトです
		window.mydata = result;
		var op = null;
		// 空のオプション( 文字列を使用 )
		$("#target1").append("<option value='0'></option>");
		for( var i = 0; i < window.mydata.ken.length; i++ ) {
			op = document.createElement("option");
			$(op).attr("value", i+1);
			$(op).append(window.mydata.ken[i]);
			$("#target1").append(op);
		}

		// JavaScript 用プロパティなので、attr で実行するとエラー 
		$("#target1").prop("selectedIndex",27);
		// $("#target1").get(0).selectedIndex = 27; // DOM を使う場合

	});
});

window.myData2 = { "ken" : ["北海道","青森県","岩手県","宮城県","秋田県","山形県","福島県","茨城県","栃木県","群馬県","埼玉県","千葉県","東京都","神奈川県","新潟県","富山県","石川県","福井県","山梨県","長野県","岐阜県","静岡県","愛知県","三重県","滋賀県","京都府","大阪府","兵庫県","奈良県","和歌山県","鳥取県","島根県","岡山県","広島県","山口県","徳島県","香川県","愛媛県","高知県","福岡県","佐賀県","長崎県","熊本県","大分県","宮崎県","鹿児島県","沖縄県"]};

$( function() {
	var op = null;
	// 空のオプション( 文字列を使用 )
	$("#target2").append("<option value='0'></option>");
	for( var i = 0; i < window.myData2.ken.length; i++ ) {
		op = document.createElement("option");
		$(op).attr("value", i+1);
		$(op).append(window.myData2.ken[i]);
		$("#target2").append(op);
	}

	// JavaScript 用プロパティなので、attr で実行するとエラー 
	$("#target2").prop("selectedIndex",1);
	// $("#target2").get(0).selectedIndex = 1; // DOM を使う場合

});


</script>
<select id="target1">
</select>
<hr />
<select id="target2">
</select>
jsdo.it での実行
jsdo.it でのソースコード

以下はコンボボックス用のデータをクロスドメインで呼び出す事を想定しているコードです。このコードを使うには、IE は IE10 である必要があります。
<?
header( "Access-Control-Allow-Origin: *" );
header( "Content-Type: text/plain; Charset=utf-8" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );

print '{"ken" : ["北海道","青森県","岩手県","宮城県","秋田県","山形県","福島県","茨城県","栃木県","群馬県","埼玉県","千葉県","東京都","神奈川県","新潟県","富山県","石川県","福井県","山梨県","長野県","岐阜県","静岡県","愛知県","三重県","滋賀県","京都府","大阪府","兵庫県","奈良県","和歌山県","鳥取県","島根県","岡山県","広島県","山口県","徳島県","香川県","愛媛県","高知県","福岡県","佐賀県","長崎県","熊本県","大分県","宮崎県","鹿児島県","沖縄県"]}';

?>

Access-Control-Allow-Origin: * によってクロスドメインが可能になりますが、XMLHttpRequest で処理するには IE は IE10 である必要があります。IE9(IE8) でクロスドメインの呼び出しは、XDomainRequest を使用する必要があります。

IE9(IE8) は、インターネットの設定(「ドメイン間でのデータソースのアクセス」を有効)を行うと、無条件にクロスドメインの処理ができるようになります。但し、その場合でも jQuery を使う場合は $.ajax を実行する前に $.support.cors = true を実行する必要があります。
関連する記事 prototype.js でクロスドメインの Ajax の読み込みテスト
タグ:jquery AJAX
posted by lightbox at 2013-02-19 14:31 | jQuery + Ajax | このブログの読者になる | 更新情報をチェックする

2013年02月14日


jQuery ajax テキスト取得テンプレート

サーバーのデータ呼び出しなら jQuery

今となっては、ajax という言葉が適当かどうかは解りませんが、その意味する所は『画面の書き換えを際限無く行うには、データをサーバー側に置いておいて、必要な時に随時呼び出す』場合の処理の名前のように思います。

その方法の実体は、XMLHttpRequest ですが、ブラウザ毎の微妙な違いを考える以上に、記述が煩雑なので、ライブラリでかつ、とても簡単でリアルな jQuery で書く事が最短距離です。
dataType を text にしておかない(何も指定しない)と Google Chrome(たぶんIE10も) は Content-Type が text/javascript の場合 javascript として実行されるので、javascript として処理できない場合はエラー(parsererror)として扱われます。

逆に、dataType を指定しないと、テキストが javascript の場合 Google Chrome では読み込むと同時に実行される事になります。
( 例えば alert("OK") とかを読み込むと、メッセージボックスが表示される )
※ XMLHttpRequest Mozilla : XMLHttpRequest XMLHttpRequest object (Internet Explorer) XDomainRequest object (Internet Explorer) ですが、いつも使っていないと書き方を忘れてしまうし、jQuery のバージョンアップも結構頻繁なので処理の確認をしたいばあいは Google がホストしているライブラリを使うのがいいと思います。 Google Hosted Libraries 今だと、jQuery だけなら以下のようにすればすぐ利用できます
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
あるいは、jsdo.it を使って、以下のようなセットを用意しておくとイザという時にすぐ使う準備ができると思います。

jsdo.it で実行

特に、サーバーからデータを取り出す処理なので通常はサーバーが必要となり、その準備もしなければならないのですが、jsdo.it だとデータもアップロードできるので非常に便利です。
function ajax_test(err) {

    $.ajax({
        url: "http://jsrun.it/assets/y/X/K/d/yXKdP"+err,
        cache: false,
        dataType : "text"
    }).done( function( result, textStatus, jqXHR ) {
        console.dir( jqXHR );
        console.log( textStatus );	// success
        console.log( jqXHR.status );	// 通常 200
        console.log( jqXHR.statusText );	// OK
    
        var headers = jqXHR.getAllResponseHeaders();
        console.dir( headers );
    
        // 成功した結果 : jqXHR.responseText
        console.log( result );
    
    }).fail(function( jqXHR, textStatus ) {
        console.dir( jqXHR );
        console.log( textStatus );	// error
        console.log( jqXHR.status );	// 404 等
        console.log( jqXHR.statusText );	// Not Found 等
    
        var headers = jqXHR.getAllResponseHeaders();
        console.dir( headers );
        console.log( jqXHR.responseText );
        
    });

}
.done から繋げて .fail というような書き方が今は最新である事を jQuery のサイトで確認しましたが、それぞれ .success と .error から置き換えられています。( .complete は .always )
Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are deprecated as of jQuery 1.8. To prepare your code for their eventual removal, use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.
.done(function(data, textStatus, jqXHR){}) ここで実行したサンプルでは、最も簡単でオプションが設定されていません。data は、サーバーより取得した文字列です。textStatus には 『success』がセットされます。jqXHR は、ネイティブの XMLHttpRequest の上位セットであり、全てのメソッドやプロパティを持ちます。 .fail(function(jqXHR, textStatus, errorThrown){}) textStatus には、『error』がセットされます。jqXHR.status には例えば "404" がセットされて、その場合はには jqXHR.statusText に "Not Found" がセットされます。通常、404 の場合でも、何らかのテキストが送られて来るので、それが欲しい場合は jqXHR.responseText で取得できます。 .then(成功処理, 失敗処理) ここでは ajax_test2 で使用されていますが、 Windows8 の JavaScript でのサンプルで頻繁に使われていたタイプです。 テストは、開発者ツールで 結果の表示は console.log と console.dir を使っているので、ブラウザで開いて確認して下さい。
タグ:jquery
posted by lightbox at 2013-02-14 23:24 | jQuery + Ajax | このブログの読者になる | 更新情報をチェックする

2012年04月28日


$.ajax({}).then( doneCallbacks, failCallbacks ); のテスト

読みだすデータは、shift_jis で書かれた JSON 形式のテキストです。
{
	"version" : "1.01a",
	"name" : "日本語名表示"
}
.then() は、Windows8 Metro(JS) のすべての処理において同じ仕様のものが使われています 成功の場合 1) success が呼ばれる 2) doneCallbacks が呼ばれる 失敗の場合 1) failCallbacks が呼ばれる 2) statusCode 内が呼ばれる JSON.parse を使用しているのは、Windows8 Metro(JS)との互換の為です。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=euc-jp">
</head>
<body>

<script type="text/javascript" src="http://localhost/json/jquery-1.7.2.min.js"></script>
<script type="text/javascript">

$.ajax({
	url: "target.json",
	beforeSend: function ( xhr ) {
		xhr.overrideMimeType("text/plain; charset=shift_jis");
	},
	success: function(data, textStatus, jqXHR) {
		alert(data);
		alert(textStatus);
		alert( JSON.stringify(jqXHR,null,"   ") );
	},
	statusCode: {
		404: function() {
			alert("ページが存在しません");
		}
	}
}).then(
	function(data, textStatus, jqXHR) {
		var obj = JSON.parse( data );
		$("#tx1").val( obj.version );
		$("#tx2").val( obj.name );
	},
	function(data) {
		alert("err\n"+JSON.stringify(data,null,"   "));
		alert("この後、statusCode の処理が実行されます");
	}
);

</script>

<input type="text" id="tx1">
<br />
<input type="text" id="tx2">
</body>
</html>



posted by lightbox at 2012-04-28 21:48 | jQuery + Ajax | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します


Windows
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
PHP正規表現チェッカー
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり