JQuery yibutijiaobiaodan

原创于 2014-04-23 23:05:38 发布 · 951 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了一个使用 jQuery 的 AJAX 异步提交表单数据的实战案例，包括 HTML 表单、JavaScript 代码及后端处理逻辑。同时展示了如何通过 AJAX 执行批量添加操作，并返回处理结果。

利用jquery的ajax 异步提交表单数据demo，

导入相关的两个jquery的js包。

index.html

<html>
<head>
	<script type ="text/javascript" src="jquery.js"></script>
	<script type ="text/javascript" src="jquery.form.js"></script>
</head>
<body>
<script>   
    $(function() {    
	    $("input[type='button']").bind("click", function() {  

	 		$.ajax({
			    type : 'post',
			    url : 'servlet/ServletDemo',
			    dataType : 'text',
			    data : $('#f1').serialize(),
			    success : function (xmlq) {
			        alert(xmlq);
			    },
			    error : function (xmlq, errq) {
			        alert(errq);
			    }
			});
			
	     }); 
    });  

      
</script>   

<form name="f1" id="f1" action="/servlet/ServletDemo">
	<input type="text" name="username"/>
	<input type="text" name="age"/>
	<input type="button" value="Ajax请求" />  
</form>

</body>
</html>

ServletDemo.java(Servlet)

public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		PrintWriter out = response.getWriter();
		out.println(request.getParameter("username"));
		out.println(request.getParameter("age"));
		out.flush();
		out.close();
	}

web.xml

 <servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>ServletDemo</servlet-name>
    <servlet-class>com.xiami.demo.servlet.ServletDemo</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>ServletDemo</servlet-name>
    <url-pattern>/servlet/ServletDemo</url-pattern>
  </servlet-mapping>

http://www.helloweba.com/view-blog-166.html 先进参照

【个人】实际运用

前端

<form id="queryForm" name="queryForm" method="post" action="mag_alumni_add_list.jsp" >
    <input type="hidden" id="class_info_id" name="class_info_id" value="<%=classInfoId %>" />
    <input type="hidden" id="obj_group_id" name="obj_group_id" value="<%=objGroupId %>" />
    <input type="hidden" id="is_sel" name="is_sel" value="N" />
    <div id="searchContent">
        <ul>
            <li>员工编号：<input type="text" class="txt" style="width:120px" id="user_name" name="user_name" value="<%="%".equals(userName)?"":userName %>" /></li>
            <li>姓名：<input type="text" class="txt" style="width:120px" id="u_name" name="u_name" value="<%="%".equals(uName)?"":uName %>" /></li>
            <li>公司/部门：
            	<select id="selCompany" name="selCompany" class="select" style="width:100px">
                        <option value="-1">请选择</option>
<% 
              for(int i=0,allcom=ls_company.size();i<allcom;i++){
            	  String[] comArr = (String[])ls_company.get(i);
%>
                        <option value="<%=comArr[0] %>" <%=companyId.equals(comArr[0])?"selected=\"selected\"":"" %> ><%=comArr[1] %></option>
<%            }                       %>
                </select>
            </li>
            <li><input type="button" class="btn" value="查询" onclick="selInfo()" /></li>
           <li><input type="button" class="btn" value="批量添加" id="arrAdd"/></li>  <!--  <span style="font-family: Arial, Helvetica, sans-serif;">//---------------此处注意 </span><span style="font-family: Arial, Helvetica, sans-serif;">--></span>
    	</ul>
        <div class="clear"></div>
    </div>
	<div id="btnContent">
	</div>
	<div class="clear"></div>
	<div>
    <table border="0" align="center" cellpadding="0" cellspacing="1" width="99%" class="table" >
        <tr>
        		<th width="40px" style="text-aglin:left">序号</th>
            <th width="60px"> 员工编号</th>
            <th width="50px" >姓名</th>
            <th width="70px">公司/部门</th>
            <th width="65px">二级部门/单位</th>
            <th width="60px">职务</th>
            <th width="60px">手机</th>
            <th width="80px">邮箱</th>
            <th width="55px">操作</th>
        </tr>
<%  
        int recordNum = userList.size();
        if(recordNum > 0){
            for(int i=0; i<recordNum; i++){
        	    String[] userArr = (String[])userList.get(i);
%>        
        <tr>
        		<td style="text-aglin:left"><input type="checkbox" id="checkItem" name="checkItem" value="<%=userArr[0] %>"/> <%=userArr[12] %></td>
            <td><%=userArr[1] %></td>
            <td><%=userArr[2] %></td>
            <td><%=userArr[3] %></td>
            <td><%=userArr[4]==null?"":userArr[4]%></td>
            <td><%=userArr[5] %></td>
            <td><%=userArr[6] %></td>
            <td><%=userArr[7] %></td>
            <td><a href="javascript:void(0)" onclick="InsUserToGroup(<%=userArr[0] %>)" >添加</a></td>
        </tr>
        
     </table>
    </form>

js代码

 $(function(){   
     //批量添加学员     
		  $("#arrAdd").click(function(){
		   var classId="<%=classInfoId%>";
    	 var objGroupIdJs="<%=objGroupId%>";
    	  var ajax_url = "manager_config_group_do.jsp?opration=upArrUserGroup&class_id="+classId+"&obj_group_id="+objGroupIdJs+""; //表单目标 
		    var ajax_data = $("#queryForm").serialize(); //表单数据 ---------------------此处注意
				if($(":checkbox[name=checkItem]:checked").length > 0){ 
				    $.ajax({ 
				     type:'post', //表单提交类型 
				     url:ajax_url, //表单提交目标 
				     data:ajax_data, //表单数据
				     success:function(data,textStatus){
				      if(data.isSuccess = "Y"){
										 alert("添加成功！");	
										 //window.location.reload();
										 window.location.href="mag_alumni_add_list.jsp?class_info_id="+classId+"&obj_group_id="+objGroupIdJs;
				      }else{
				       alert($.trim(data.msg));
				      }
				     },
				     error : function(XMLHttpRequest, textStatus, errorThrown){
							alert("服务器异常，error:" + errorThrown);    	    		
				     } 
				    }); 
				}else{	
							alert("请选择操作对象。");
           		return false;
        }
		   });    
		});

handle xxdo处理页面

 }else if("upArrUserGroup".equals(opration)){
	    	 String classId = request.getParameter("class_id");
	    	 String[] user_id = request.getParameterValues("checkItem");
	    	 boolean result=false;
		    	if(!"null".equals(objGroupId)){
		    			if(user_id!=null&&user_id.length>0){
					    		   for(int i=0;i<user_id.length;i++){
					    		   	StringBuffer sqlInfo = new StringBuffer();
								    	sqlInfo.append(" UPDATE s_class_user SET group_id = ?,user_group_order_id = s_class_order_seq.nextval ")
								    			   .append("  WHERE TYPE='N' AND class_info_id = ? AND ID = ? ");
								    	String[] sqlParam = new String[]{objGroupId,classId,user_id[i]};
								    	result=DaoHelper.modifyEntity(sqlInfo.toString(),sqlParam);
					    		   }   
		    		   }
			    		if(result){
			    			out.print("{\"isSuccess\":\"Y\",\"msg\":\"\"}");
			    		}else{
			    			out.print("{\"isSuccess\":\"N\",\"msg\":\"学员分组添加失败!\"}");
			    		}
		    	}else{
		    		out.print("{\"isSuccess\":\"N\",\"msg\":\"学员ID不存在\"}");
		    	}		
	    }

排序算法的一些技巧

初始上移下移

列表是升序
1 5 1
2 4 2
3 3 3
4 2 4
5 1 5
上移倒序取比本身小的数据
下移升序取比本身大的数据

列表是倒序
5 1 5
4 2 4
3 3 3
2 4 2
1 5 1
上移升序取比本身大的数据
下移倒序取比本身小的数据