js控制頁面顯示和表單提交

fsl發表於2014-05-07
JS

早期的web頁面在顯示方面一般在後臺進行控制，雖然對後臺開發來講是比較容易做到的，但是涉及到一個問題，那就是資料庫壓力。

因為要控制顯示，所以會比較頻繁的從資料庫中來回撥用。

 

現在的js功能越來越強，且開發越來越方便，那麼很多頁面顯示可以轉交給js來進行控制，方法其實比較簡單，就是控制顯示和隱藏而已。

 

實現方法如下


篩選： 
<a class="ch-btn-skin ch-btn-small" onclick="get_a(this,event)" >全部</a> 
<a class="ch-btn-skin ch-btn-small" onclick="get_c(this,event)" data=1>動態</a>   
<a class="ch-btn-skin ch-btn-small" onclick="get_c(this,event)" data=2>教育</a>   
<a class="ch-btn-skin ch-btn-small" onclick="get_c(this,event)" data=3>社保</a>

　js程式碼如下

function get_c(elem,event){
	var cid=$(elem).attr("data");
	$("table tr[data!="+cid+"]").hide();	
        $("table tr[data="+cid+"]").show();
}

function get_a(elem,event){
       $("table tr").show();
}

檔案顯示部分是一個表格。通過js控制當前頁面的分類篩選，速度顯示上非常快。

程式碼部分主要注意，使用了jquery。函式中使用了js中的this來代表本身，從而可以獲取元素本身的值，從而通過元素屬性值的不同，控制頁面具有相同屬性部分的隱藏和顯示。

　

 

表單提交是個比較簡單的事情，但是一旦需要多次提交且是同一個表單提交至不同頁面，問題就會很麻煩。這個時候如果不借助js進行控制相信實現起來比較困難。

如果通過js來提交，就可以控制的比較細。程式碼實現如下

<form class="form-horizontal" method="post" action="list.php?a=re" name="tj">
<input  type="textl"  name="ttt" >
<input  type="email"  name="ee" >
<button class="btn btn-success" onclick="sc()">按商家列出</button>
<button class="btn btn-success" onclick="st()">按時間列出</button>
</form>

//document.tj.ee.value=document.forms[0].elements[1].value
function sc(){
     tj.action="list.php?a=cid";
     tj.submit();
  }
function st(){
     tj.action="list.php?a=cte";
     tj.method="post";
     tj.submit();
  }

　　

 

 

 

 

相關文章