1. 程式人生 > >常用的jquery函式總結

常用的jquery函式總結

<pre name="code" class="javascript">
1、表單驗證

2、$.post

function save_project(ctx){
	alert(121);
	/*if(!checkForm()){
		return;
	}*/
	var url="${ctx}/project/ajax/save_project";
	var param=$("#proForm").serialize();
	param=param+"&random="+Math.random();
	alert(param);
	$.post(url,param,function(json){
		if(!json.flag){			
			alert("失敗");
		}else{
			alert("成功");
		}
	});
}


3、$.ajax

function doTestJson(ctx){
	alert( $("#proForm").serialize());
    $.ajax({
    	url:ctx+'/project/ajax/save_project',
        type: 'POST', 
        data: $("#proForm").serialize(),
        dataType: 'json',
        contentType:'application/json;charset=UTF-8',        
        success: function(json) { 
            alert(json.result); 
        }
    });
}
//序列化表單元素,返回json資料  
            var params = $("#userForm").serializeArray();  
              
            //也可以把表單之外的元素按照name value的格式存進來  
            //params.push({name:"hello",value:"man"}); 

4、form提交

第一種:

$(function() {
	    
	    $("#tijiao").click(function() { 
	    	if(checkForm()){
		        $("#myForm").ajaxSubmit({
		             url: "${ctx}/teacher/addTeacher.shtml",   // 提交的頁面
		             data: $("#myForm").serialize(), // 從表單中獲取資料
		             type: "POST",                   // 設定請求型別為"POST",預設為"GET"
		             dataType:"json",
			         success: function(json) {
			            jAlert(json.result, '結果',function(r){
							if(json.flag) {
								window.close();
							}else {
								return;
							}
						});
			 		}
		        	
		        }); 
	        }else{
	        	 jAlert("請檢查表單必填項,是否填寫", '結果');
	        }
	        return false; 
	    }); 
		
});

$(function(){});這個是必須的。

第二種:

//儲存所有選中的
		    $("#myForm2").submit(function() {//重點難點
		    	if(true){
			       $(this).ajaxSubmit({
			             url: "${ctx}/courseservices/saveText.shtml",
			             data: $("#myForm2").serialize(),
			             type: "POST",
			             dataType:"json",
				     success: function(json){
				        if(!json.flag){		
						alert('失敗');
					}else{
						alert('成功');
					}
				     }
			        	
			        });
		        }
		        return false; 
		    });


5、jquery全選/取消 checkbox

$("#checkall").click(function(){
      if(this.checked){
	$("input[type='checkbox'][name='indexs']").each(function(){this.checked=true;});
      }else{
	$("input[type='checkbox'][name='indexs']").each(function(){this.checked=false;});
      }
}); 


6、級聯選擇

/**
 * 組織機構聯想查詢
 * @param name
 * @param selectId
 * @param deptType 
 */
function getDeptByName(name,selectId,deptType){
	$.ajax({
		url:contextPath+"/public/getDeptByName.shtml",
		type:"post",
		data:{"deptName":$("#"+name).val(),"deptType":deptType,"r":Math.random()},
		dataType:"json",
		success:function(msg){
			$("#"+selectId).empty();
			$('#'+selectId).append("<option value=''>請選擇</option>");
			$.each(msg.mapList, function(i, item) {
				$('#' + selectId).append("<option value='" + item.deptId + "'>"+item.deptName+ "</option>");
			});

		}
	
	});
	
}

or
/** 
 * 場地聯動查詢 
 * target 目標name
 *  */
function getVenuesByAreaId(areaId,target){
	$.ajax({
		url:contextPath+"/getVenuesByAreaId.shtml",
		type:"post",
		data:{"id":areaId,"r":Math.random()},
		dataType:"json",
		success:function(msg){
			//alert(msg.gtlist.length);
			var option = "";			
				option +="<option value=''>場地</option>";
				for(var i=0;i<msg.mapList.length;i++){
					option += "<option value='"+msg.mapList[i].id+"'>"+msg.mapList[i].name+"</option>";			
			     }	
			$("select[name='"+target+"']").html(option);

		}
	
	});
}