Jquery

1.get(url,[data],[callback],[type])

url:请求地址

data：请求的参数

callback：回调函数

type：返回的类型，可以是xml，html，script，json，text

当url里面的控制层执行失败时，不回调用callback函数

2.异步请求获取数据

在jsp页面调用controller层函数，异步获取数据，并将结果赋值给id为“i_mine_count”的标签

<span style="font-size:18px;"><i id="i_mine_count">8</i></span>

<span style="font-size:18px;"><script language="javascript" type="text/javascript"></span>

<span style="font-size:18px;">function getMineMsgCount(){</span>

<span style="font-size:18px;">		var path = ctx + "/support/nolayout/mineCount.sc";</span>

<span style="font-size:18px;">		$.get(path,{},function(data){</span>

<span style="font-size:18px;">			$("#i_mine_count").html(data);</span>

<span style="font-size:18px;">		});</span>

<span style="font-size:18px;">	}</span>

<span style="font-size:18px;">	getMineMsgCount();</span>

<span style="font-size:18px;"></script>（其中：<c:set var="ctx" value="${pageContext.request.contextPath}"/>）</span>

path是请求（servlet/controller）路径,

{}是传递的参数，可选，

data是path路径对应的函数的执行结果,

如果path对应的路径错误或方法执行错误，不会执行后面的回调函数function(data)

3).jQuery实现页面选项卡切换

<div class="fl tree_menu">
        	<ul>
            	<li id="one1" οnclick="setTab('one',1,4)" class="tree_select">系统用户</li>
                <li id="one2" οnclick="setTab('one',2,4)" class="tree_menu_nav">企业用户</li>
                <li id="one3" οnclick="setTab('one',3,4)" class="tree_menu_nav">个人用户</li>
            </ul>
            <!--这里是树形菜单（单位--部门--人员）-->
            <div class="clear tree_menu_con">
                 <div id="con_one_1" >ASP</div>
			   <div id="con_one_2" style="display:none">PHP</div>
			   <div id="con_one_3" style="display:none">.NET</div>
            </div>
</div>
<script language="javascript" type="text/javascript">
function setTab(name,cursel,n){
	 for(i=1;i<=n;i++){
	  var menu=document.getElementById(name+i);
	  var con=document.getElementById("con_"+name+"_"+i);
	  menu.className=i==cursel?"hover":"";
	  con.style.display=i==cursel?"block":"none";
	 }
	}
</script>

4).jquery添加收件人

页面左边部分：

<c:if test="${!empty list}">
<span style="white-space:pre">		</span>             <div class="fl tree_menu">
<span style="white-space:pre">			</span>           <c:forEach var="customer" items="${list}">
<span style="white-space:pre">				</span>          <button class="flag" id="flag${customer.customerId}" type="button" name="${customer.customerId }" value="${customer.customerName }">${customer.customerName }</button><br>
<span style="white-space:pre">			</span>           </c:forEach>
<span style="white-space:pre">			</span>         </div>
<span style="white-space:pre">	</span>            </c:if>

页面右边：

 <div class="fl selected">
        <span style="white-space:pre">	</span><span id="selected" class="selected_bj"></span>
            <div id="right" class="select_person"></div>   
        </div>

script代码：

$(document).ready(function(){
<span style="white-space:pre">	</span>var i = 0;
<span style="white-space:pre">	</span>var has = false;
<span style="white-space:pre">	</span> $(".flag${customer.customerId}").click(function(){
<span style="white-space:pre">		</span> //alert($(".right_button").size());
<span style="white-space:pre">		</span> $(this).addClass("active");
<span style="white-space:pre">		</span> name = $(this).attr("name");
<span style="white-space:pre">		</span> value = $(this).attr("value");
<span style="white-space:pre">		</span> i = $(".right_button").size();
<span style="white-space:pre">		</span> $(".right_button").each(function(){
<span style="white-space:pre">			</span>if(this.innerHTML == value){
<span style="white-space:pre">					</span> has = true;
<span style="white-space:pre">					</span>}
<span style="white-space:pre">			</span> });
<span style="white-space:pre">		</span>if(!has){
<span style="white-space:pre">			</span>i+=1;
<span style="white-space:pre">		</span> $("#right").append("<li><button id=" + name + " class='right_button' type='button' οnclick='remove_single();'>" + value + "</button></li>");
<span style="white-space:pre">		</span> $("#selected").html("已选(" + i + ")");
<span style="white-space:pre">		</span>}
<span style="white-space:pre">	</span> });
}); 
<span style="white-space:pre">	</span>function add_person(){
<span style="white-space:pre">		</span>if($(".right_button").size() < 1){
<span style="white-space:pre">			</span>var l = '${fn:length(list)}';
<span style="white-space:pre">			</span><c:forEach var="customer" items="${list}">
<span style="white-space:pre">				</span>$("#right").append("<li><button id='${customer.customerId}' class='right_button' type='button' οnclick='remove_single(${customer.customerId});'>${customer.customerName}</button></li>");
<span style="white-space:pre">				</span>$("#selected").html("已选(" + l + ")");
<span style="white-space:pre">			</span></c:forEach>
<span style="white-space:pre">		</span>}
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>function remove_person(){
<span style="white-space:pre">		</span>$("#right button").remove();
<span style="white-space:pre">		</span>$("#selected").html("未选");
<span style="white-space:pre">		</span>$(".flag${customer.customerId}").removeClass("active");
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>function remove_single(id){
<span style="white-space:pre">		</span>i = $(".right_button").size() - 1;
<span style="white-space:pre">		</span>$(".right_button").remove();
<span style="white-space:pre">		</span>$("#selected").html("已选("+ i + ")");
<span style="white-space:pre">	</span>}