基本的crud操作，個人是相當喜歡在Search時使用jQuery Form來做ajax submit，將結果指到一個div中顯示，這樣的優點是不是再寫任何程式來保留使用者查詢的條件，因為它根本沒被更新過，特別是一些select/option這類還要去比對的部份就不用再費心。
至於Create、Update這類的就不用麻煩到用ajax submit，但是必需要考慮到duplicate submit的問題，以往會利用些小方法，像是為每一次要輸入的from建一個id，發現目前這id與之前最後一次收到的id相同時，就取消這次的操作，或是直接disable掉可以操作的button，但利用blockUI可以同時達到告知使用者已經在處理中及防止duplicate submit的效果。
下面是簡單的範例筆記
<html>
<head>
<title>Form</title>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>
<script src="jquery.blockUI.js" type="text/javascript"></script>
</head>
<body>
<div id="main">
<!--Search Form-->
<div id="form">
<script language="javascript">
$().ready(function(){
var options = {
target : "#result",
success : $.unblockUI
};
$("#myForm").submit(function() {
$(this).ajaxSubmit(options);
$.blockUI();
return false;
});
});
</script>
<form name="myForm" action="result.html" method="post" id="myForm">
<input name="age" type="text" />
<input type="submit" value="Search" />
</form>
</div>
<!-- Dispaly result here-->
<div id="result">
</div>
</div>
</body>
</html> 
沒有留言:
張貼留言