前台 jquery通过点击事件添加数量，并异步请求修改

最新推荐文章于 2024-07-14 03:40:57 发布

原创最新推荐文章于 2024-07-14 03:40:57 发布 · 912 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个使用Java实现的修改排序功能，通过Controller接收前端请求参数并更新数据库中对应记录的排序值。前端采用jQuery实现增减操作，并通过AJAX与后端交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

controller 调用的方法

</pre><p>controller</p><p><pre name="code" class="java">//修改排序

	@RequestMapping(value = "updateSort")
	 public @ResponseBody Map<String,Object> updateSort(HttpServletRequest request,HttpServletResponse response) throws IOException{  
		logger.info("	//修改排序");
        int id =Integer.parseInt((String)request.getParameter("id"));
        int sort =Integer.parseInt((String)request.getParameter("sort"));
       //后台验证排序
        if(sort>3){
        	sort=3;
        }
        if(sort<0){
        	sort=0;
        }
       Information information= 		informationService.getInformationById(id);
       information.setSort(sort);
       informationService.updateInformation(information);
       Map<String,Object> map = new HashMap<String,Object>();  
       map.put("sort",sort );
        return map;  
    }

jsp

页面调用的方法和js方法

<td>
          	 <input id="${bean.id }" value="${bean.sort }"  readOnly="true" style=" width: 17px; text-align: center"  />  
         	 <span class="up" onclick=add(this); >↑</span>
         	 <span class="down" onclick=minus(this);>↓</span>
          </td>

jquery方法

	function add(event) {
		
		var jq_object = $(event).prev();
		var value = parseInt(jq_object.val())+1;
		var id = jq_object.attr("id");
		if(value>3){
			value=3
		}
		jq_object.val(value)	
		
			

	 
	    $.ajax({
	    	 type: "post",
	    	 url: "${pageContext.servletContext.contextPath}/information/updateSort.shtml?sort="+ value+"&id="+id,
		    	 success: function(data){
		    	 },
		    	 
		    	 error: function(){
		    	 	alert("排序出错");
		    	 },
	    	 
	    	});
		
		

	    
	    
	    
	    
	}
	
	
	function minus(event) {
		var jq_object = $(event).prev();
		jq_object = jq_object.prev();
		var value = parseInt(jq_object.val())-1;
		var id = jq_object.attr("id");
		if(value<0){
			value=0
		}
		jq_object.val(value)	
		
			

	 
	    $.ajax({
	    	 type: "post",
	    	 url: "${pageContext.servletContext.contextPath}/information/updateSort.shtml?sort="+ value+"&id="+id,
		    	 success: function(data){
		    	 },
		    	 
		    	 error: function(){
		    	 	alert("排序出错");
		    	 },
	    	 
	    	});
		
		
	    
	}