ＳＱＬの窓 イラストAC フリー素材
<< JScript( WSH ) : Msxml2.ServerXMLHTTP … | TOP | PHP : MySQL から JSON 文字列を返す自作… >>

2019年08月20日

jQuery の $.ajax で JSON 文字列を WEB より取得して TABLE を作成する

 
IE11 でも動作します。

JSON 文字列は、PHP で access-control-allow-origin: * を出力してどこからでも読み込めるようにしています。


<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta charset="utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

<link rel="stylesheet" href="https://lightbox.sakura.ne.jp/demo/two-section.css">
<script src="https://lightbox.sakura.ne.jp/demo/number-format.js"></script>

<script>

$(function(){

	// **************************************
	// ボタン
	// **************************************
	$("#load_json").on( "click", function(){

		$.ajax({
			url: "https://lightbox.sakura.ne.jp/demo/json/syain_api_bind.php",
			cache: false,
			data: { "name" : $("#sname").val() }
		})
		.done(function( data, textStatus ){
			console.log( "status:" + textStatus );
			console.log( "data:" + JSON.stringify(data, null, "    ") );

			// tabble 作成
			loadData( data );

		})
		// 失敗
		.fail(function(jqXHR, textStatus, errorThrown ){
			console.log( "status:" + textStatus );
			console.log( "errorThrown:" + errorThrown );
		})
		// 常に実行
		.always(function() {

		})
		;
	
	});

	// **************************************
	// このページ自身の QRコードの表示
	// **************************************
	$('#qrcode')
		.css({ "margin" : "20px 20px 20px 20px" })
		.qrcode({width: 160,height: 160,text: location.href });

});

// **************************************
// JSON => table
// **************************************
function loadData( data ) {

	$("#tbl").html("");

	// データ用
	var row_data;

	// 行のループ  ( <tr></tr> )
	$.each(data, function( index, syain ) {

		// 初回はタイトル作成
		if ( index == 0 ) {
			// テーブルに行を追加	
			row_data = $("<tr></tr>").appendTo( "#tbl" );
			$.each( syain, function( key, value ) {
				$("<th></th>")
					.appendTo( row_data )
					.text( key );
			});
		}


		// テーブルに行を追加	
		row_data = $("<tr></tr>").appendTo( "#tbl" );

		// 列のループ ( <td></td> )
		$.each( syain, function( key, value ) {

			$("<td></td>")
				.appendTo( row_data )
				.text( value );

		});
	
	});

}
</script>
</head>
<body>
	<div id="head">
		<input type="text" id="sname" name="sname">
		<input type="button" id="load_json" value="検索">
	</div>

	<div id="extend">
		<table class="table">
		<tbody id="tbl">

		</tbody>
		</table>

		<div id="qrcode"></div>
	</div>

</body>
</html>



関連する記事

下半分がスクロールするページ【 height: calc( 100% - 120px ) 】

PHP : MySQL から JSON 文字列を返す自作(テスト用) API テンプレート
【jQueryの最新記事】
posted by at 2019-08-20 17:00 | jQuery | このブログの読者になる | 更新情報をチェックする


Powered by Seesaa