js控制页面显示和表单提交

时间：2023-03-08 16:47:06

早期的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();

  }

　　

相关文章