入力したURLをbit.ly APIで短縮し、その戻り値をすべて表示します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<h3>bit.ly API</h3>
<p>入力したURLをbit.ly APIで短縮し、その戻り値をすべて表示します。</p>
<form>
<p>
<input type="text" size="100" id="long_url" name="long_url" value="https://www.google.co.jp/" />
<input type="button" id="btn_shorten" value="URLを短縮する" />
</p>
</form>
<div id="loading" style="display:none;">loading...</div>
<script type="text/javascript">
/* shorten.phpの中身
*/
$(function(){
var def=$("#loading").html();
$("#btn_shorten").click(function(){
if($("#long_url").val()==""){
$("#loading").html("URLが入力されていません").show();
return false;
}
$("#loading").html(def).show();
$.getJSON(
"/module/include/topic/bitlyapi/shorten.php", //URL短縮
{
long_url:$("#long_url").val()
},
function(data){
var s="";
if(window.console && console.log) console.log(data); //debug
if(!data){
$("#loading").html("短縮できませんでした");
}else{
$.each(data,function(k,v){
if(k=="data"){
$.each(v,function(k2,v2){
if(k2=="long_url" || k2=="url"){
s+=k2+": <a href='"+v2+"' target='_blank'>"+v2+"</a><br>";
}else{
s+=k2+": "+v2+"<br>";
}
});
}else{
s+=k+": "+v+"<br>";
}
});
$("#loading").html("<h4>結果</h4><p>"+s+"</p>");
}
}
);
});
});
</script>
</body>
</html>