Mulder's Java小鋪: 3月 2015

2015年3月13日星期五

[jQuery] jQuery ajax 使用方法 + 讀取時有 loading 圖示

jQuery ajax 的用法

url：要呼叫的 url
data：要傳的值，可以用 {a:"abc", b:"def"}
type："POST"，也可以用GET
dataType："text"，回傳的格式，如回傳是json 就為json
success：成功
error：失敗或錯誤

讀取資料時會有loading訊息要增加以下兩個參數

complete：請求完成時執行的函式(不論結果是success或error)。
beforeSend：發送請求之前會執行的函式。

	$.ajax({
	url: URLs,
	data: $('#sentToBack').serialize(),
	type:"POST",
	dataType:'text',
	success: function(msg){
	alert(msg);
	},
	beforeSend:function(){
	$('#loadingIMG').show();
	},
	complete:function(){
	$('#loadingIMG').hide();
	},
	error:function(xhr, ajaxOptions, thrownError){
	alert(xhr.status);
	alert(thrownError);
	}
	});

view raw gistfile1.js hosted with ❤ by GitHub

	<form id="sentToBack">
	<input type="text" name="Text"/>
	<input type="button" value="送出" onClick="Submit()"/>
	</form>
	<div id="loadingIMG" style="display:none"><img src="loading.gif" height='14'/>資料處理中，請稍後。</div>

view raw gistfile1.html hosted with ❤ by GitHub

一開始把loadingIMG設定為不可被看見(隱藏)，當你按下送出按鈕後，

他會去執行Submit()的函數。其後執行ajax的運作。

當他開始運作的時候，會先去執行beforeSend裡面的function，

這時會把loadingIMG顯示出來($('#loadingIMG').show();)，

當執行完成之後，不論是成功或是有錯誤，

都會去執行complete，在去把loadingIMG隱藏起來

($('#loadingIMG').hide();)。

Loading 圖示可以從以下網站取得
http://ajaxload.info/

jquery ajax 文件 http://api.jquery.com/jquery.ajax/

2015年3月9日星期一

[Javascript] 暫存網頁資料 localStorage 和 SessionStorage

如何用javascript 暫存資料，有下列兩個方式 localstorage 和 sessionstorage
localstorage 和 sessionstorage 差異如下：
localStorage:只要不去清除，那麼只要是在同一個瀏覽器就算新開一個tab也都可以再把資料取回來
SessionStorage:只要關閉瀏覽器或者新開一個tab生命週期就結束了，也就無法取得資料了

	<body>
	<table border="1">
	<tr>
	<td>
	local storage：
	</td>
	<td>
	<input type="text" id="local" />
	<div id="localvalue"></div>
	</td>
	</tr>
	<tr>
	<td>
	session storage:：
	</td>
	<td>
	<input type="text" id="session" />
	<div id="sessionvalue"></div>
	</td>
	</tr>
	<tr>
	<td colspan="2">
	<button type="button" id="save" onclick="saveStorage()">save</button>
	<button type="button" id="open" onclick="openStorage()">open</button>
	<button type="button" id="clear" onclick="clearStorage()">clear</button>
	</td>
	</tr>
	<tr>
	<td>source from：http://www.dotblogs.com.tw/richshangwei/archive/2014/12/18/147707.aspx</td>
	</tr>
	</table>
	</body>

view raw gistfile1.html hosted with ❤ by GitHub

	<script>
	function saveStorage(){
	window.localStorage["local"] = document.getElementById('local').value;
	window.sessionStorage["session"] = document.getElementById('session').value;
	}
	function openStorage(){
	document.getElementById('localvalue').textContent = window.localStorage["local"];
	document.getElementById('sessionvalue').textContent = window.sessionStorage["session"];
	}
	function clearStorage(){
	document.getElementById('local').value = window.localStorage.clear();
	document.getElementById('session').value = window.sessionStorage.clear();
	document.getElementById('local').value = "";
	document.getElementById('session').value = "";
	document.getElementById('localvalue').textContent = "";
	document.getElementById('sessionvalue').textContent = "";
	}
	</script>

view raw javascript localStorage and sessionStorage hosted with ❤ by GitHub

資料來源：http://www.dotblogs.com.tw/richshangwei/archive/2014/12/18/147707.aspx

2015年3月13日 星期五

[jQuery] jQuery ajax 使用方法 + 讀取時有 loading 圖示

2015年3月9日 星期一

[Javascript] 暫存網頁資料 localStorage 和 SessionStorage

2015年3月13日星期五

2015年3月9日星期一