1. <pre name="code" class="javascript">  

1、表单验证

2、$.post

1. function save_project(ctx){  
2.     alert(121);  
3.     /*if(!checkForm()){ 
4.         return; 
5.     }*/  
6.     var url="${ctx}/project/ajax/save_project";  
7.     var param=$("#proForm").serialize();  
8.     param=param+"&random="+Math.random();  
9.     alert(param);  
10.     $.post(url,param,function(json){  
11.         if(!json.flag){           
12.             alert("失败");  
13.         }else{  
14.             alert("成功");  
15.         }  
16.     });  
17. }

3、$.ajax

1. function doTestJson(ctx){  
2.     alert( $("#proForm").serialize());  
3.     $.ajax({  
4.         url:ctx+'/project/ajax/save_project',  
5.         type: 'POST',   
6.         data: $("#proForm").serialize(),  
7.         dataType: 'json',  
8.         contentType:'application/json;charset=UTF-8',          
9.         success: function(json) {   
10.             alert(json.result);   
11.         }  
12.     });  
13. }

1. //序列化表单元素，返回json数据    
2.             var params = $("#userForm").serializeArray();    
3.                 
4.             //也可以把表单之外的元素按照name value的格式存进来    
5.             //params.push({name:"hello",value:"man"});

4、form提交

第一种：

1. $(function() {  
2.           
3.         $("#tijiao").click(function() {   
4.             if(checkForm()){  
5.                 $("#myForm").ajaxSubmit({  
6.                      url: "${ctx}/teacher/addTeacher.shtml",   // 提交的页面  
7.                      data: $("#myForm").serialize(), // 从表单中获取数据  
8.                      type: "POST",                   // 设置请求类型为"POST"，默认为"GET"  
9.                      dataType:"json",  
10.                      success: function(json) {  
11.                         jAlert(json.result, '结果',function(r){  
12.                             if(json.flag) {  
13.                                 window.close();  
14.                             }else {  
15.                                 return;  
16.                             }  
17.                         });  
18.                     }  
19.                       
20.                 });   
21.             }else{  
22.                  jAlert("请检查表单必填项，是否填写", '结果');  
23.             }  
24.             return false;   
25.         });   
26.           
27. });

$(function(){});这个是必须的。

第二种：

1. //保存所有选中的  
2.             $("#myForm2").submit(function() {//重点难点  
3.                 if(true){  
4.                    $(this).ajaxSubmit({  
5.                          url: "${ctx}/courseservices/saveText.shtml",  
6.                          data: $("#myForm2").serialize(),  
7.                          type: "POST",  
8.                          dataType:"json",  
9.                      success: function(json){  
10.                         if(!json.flag){       
11.                         alert('失败');  
12.                     }else{  
13.                         alert('成功');  
14.                     }  
15.                      }  
16.                           
17.                     });  
18.                 }  
19.                 return false;   
20.             });

5、jquery全选/取消 checkbox

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

6、级联选择

1. /** 
2.  * 组织机构联想查询 
3.  * @param name 
4.  * @param selectId 
5.  * @param deptType  
6.  */  
7. function getDeptByName(name,selectId,deptType){  
8.     $.ajax({  
9.         url:contextPath+"/public/getDeptByName.shtml",  
10.         type:"post",  
11.         data:{"deptName":$("#"+name).val(),"deptType":deptType,"r":Math.random()},  
12.         dataType:"json",  
13.         success:function(msg){  
14.             $("#"+selectId).empty();  
15.             $('#'+selectId).append("<option value=''>请选择</option>");  
16.             $.each(msg.mapList, function(i, item) {  
17.                 $('#' + selectId).append("<option value='" + item.deptId + "'>"+item.deptName+ "</option>");  
18.             });  
19.   
20.         }  
21.       
22.     });  
23.       
24. }

or

1. /**  
2.  * 场地联动查询  
3.  * target 目标name 
4.  *  */  
5. function getVenuesByAreaId(areaId,target){  
6.     $.ajax({  
7.         url:contextPath+"/getVenuesByAreaId.shtml",  
8.         type:"post",  
9.         data:{"id":areaId,"r":Math.random()},  
10.         dataType:"json",  
11.         success:function(msg){  
12.             //alert(msg.gtlist.length);  
13.             var option = "";              
14.                 option +="<option value=''>场地</option>";  
15.                 for(var i=0;i<msg.mapList.length;i++){  
16.                     option += "<option value='"+msg.mapList[i].id+"'>"+msg.mapList[i].name+"</option>";           
17.                  }    
18.             $("select[name='"+target+"']").html(option);  
19.   
20.         }  
21.       
22.     });  
23. }

本文由职坐标整理并发布，了解更多内容，请关注职坐标WEB前端jQuery频道！