SSM3坏境下ajax和html disabled 引发的问题和总结

在 SSM3环境下做一个修改和增加的功能用ajax异步完成，如果没有就增加有就修改。。。界面

rule. jsp

<html>
<head>
<%@ include file="/common/jquery-ui-inc.jsp" %>
<script>
var objName = "商品物流规则";
var add_do="${ctx}/admin/prod/pro-rule";
   
$(document).ready(function() {
	  
 //  设定input 只能输入数字和小数点

$("#oneprod").keydown(function(event) {
                 var keyCode = event.which;
                 if (keyCode == 46 || keyCode == 8 || keyCode == 190 || (keyCode >= 48 && keyCode <= 57) || (keyCode >= 96 && keyCode <= 105) || keyCode == 110) {
                     return true;
                 } else { return false }
             }).focus(function() {
                 this.style.imeMode = 'disabled';
             }) ;
             $("#oneprods").keydown(function(event) {
                 var keyCode = event.which;
                 if (keyCode == 46 || keyCode == 8 || keyCode == 190 || (keyCode >= 48 && keyCode <= 57) || (keyCode >= 96 && keyCode <= 105) || keyCode == 110) {
                     return true;
                 } else { return false }
             }).focus(function() {
                 this.style.imeMode = 'disabled';
             });
             $("#oneprodsmoney").keydown(function(event) {
                 var keyCode = event.which;
                 if (keyCode == 46 || keyCode == 8 || keyCode == 190 || (keyCode >= 48 && keyCode <= 57) || (keyCode >= 96 && keyCode <= 105) || keyCode == 110) {
                     return true;
                 } else { return false }
             }).focus(function() {
                 this.style.imeMode = 'disabled';
             });
         });


function save(){
   if($("#oneprodsmoney").val()=='' ||  $("#oneprods").val()=='' ||  $("#oneprod").val()=='' ) {
	    alert('请将价格信息填写完整！');
	    return false;
   }
	
	
	$.ajax({
		url: add_do,type: 'POST',cache: false,

 		// 将from表单的所有元素的value值进行拼接成形如：name=value&name=value..的字符串给后台传值  这里千万注意 元素的disabled属性如                    果为true那么这个元素的值是不进行拼接的也就是不传递

                data: $("#myForm").serializeArray(),

                        success: function(data){
			var oTxt = data;
			var mess = oTxt.message;	
			var flag = oTxt.flag;
			window.confirm(mess);
			//2  再次刷新

                       window.location.href="${ctx}/admin/proadmin-rule?prodid=${product.prodid}";
			
		}
	});
	
}	
</script>
</head>
<body>

<div id="O_add"  class="easyui-pannel" icon="icon-edit" >
<form id="myForm">

<input type="hidden" id="prodid" name="prodid" value="${product.prodid}">

// 后台通过这个值来判断是保存还是修改
  但ajax方式的提交导致该值并不会改变除非再次刷新

<input type="hidden" id="oneprod1" name="oneprod1" value="${product.oneprod}">


<table class="openwin" cellspacing="1" cellpadding="0" align="center" width="100%">
<tr><th>商品名称</th><td><input type="text" id="prodname" name="proname"  value="${product.proname}"  onfocus=this.blur()></td></tr>
<tr><th>商品编号</th><td><input type="text" id="prodcode" name="prodno"   value="${product.prodno}"  onfocus=this.blur()></td></tr>
<tr><th>商品单位</th><td><input type="text" id="produnit" name="produnit"  value="${product.produnit}"  onfocus=this.blur()></td></tr>

<tr>
	<th>一${product.produnit}价格</th>
	<td><input type="text" id="oneprod" name="oneprod"   min="0"  maxlength="15" value="${product.oneprod}" />
		元
	</td>
</tr>

<tr><th>一件</th><td><input type="text" id="oneprods" name="oneprods"  value="${product.oneprods}" min="0" maxlength="15">${product.produnit}</td></tr>	
<tr><th>一件</th><td><input type="text" id="oneprodsmoney" name="oneprodsmoney"  value="${product.oneprodsmoney}" min="0" maxlength="15">元</td></tr>	
<tr>
 <th>备注</th>
 <td>
  <textarea rows="10" cols="38" name="bak" id="bak" >${product.bak}</textarea>
 </td>
</tr>
<tr><td colspan="2">
        <center>
		<a href="javascript:void(0);" onclick="save();" class="easyui-linkbutton" iconCls="icon-save">提交</a>
	    </center>
	</td>
</tr>
</table>
</form>
</div>

</body></html>

后台action

点击菜单物流规则设置第一次执行下面方法到达上面页面

/**
	 * 商品物流规则
	 */
	
	@RequestMapping("proadmin-rule")
	public ModelAndView proWuliuRule(@RequestParam(value="prodid",required=false) String prodid){
	   ChProductWuliuRule product =prorule.getProductRuleById(prodid);
	   if(product==null){
		   ChProduct product1=productManager.getProduct(prodid); 
		   product=new ChProductWuliuRule();
		   product.setProname(product1.getProdname());
		   product.setProdno(product1.getProdcode());
		   product.setProdunit(product1.getProdunit());
		   product.setProdid(product1.getProdid());
		   //product.setOneprods(-1);  
	   }
	   return new ModelAndView("admin/prodadmin/rule","product",product);
	   
	}

点击提交

/**
	 * 增加或者修改商品物流规则
	 */
	
	@RequestMapping(value="pro-rule",method=RequestMethod.POST)
	public @ResponseBody Map<String,String> proSaveRule(ChProductWuliuRule product,String oneprod1,HttpServletRequest request) {

		String oneprod=oneprod1;
	
		
		
		Map<String,String> map = new HashMap<String,String>();
        // 当oneprod为'' 或者为null的时候添加
		if (oneprod.equals("") || oneprod.equals(null)) {
            try {
            	prorule.saveProductRule(product);
				map.put("flag","true");
				map.put("message","添加商品物流规则成功");

			} catch (Exception e) {
				map.put("flag","false");
				map.put("message","添加商品物流规则失败");
				logger.error("异常信息：" + e.getMessage());
			}
        // 否则修改方法
		} else {
			try {
			String createtime=DateUtils.format (DateUtils.getDate(),"yyyy-MM-dd HH:mm:ss");
		    product.setUpdatedate(DateUtils.parse(createtime,"yyyy-MM-dd HH:mm:ss"));
				
			prorule.updateProductRule(product);
				map.put("flag","修改商品物流规则成功");
			} catch (Exception e) {
				map.put("flag","修改商品物流规则失败");
				logger.error("异常信息：" + e.getMessage());
			}
		}
		return map;
	}

问题出现了第一次显示页面的时候String oneprod1为空我会进行添加但因为是ajax方式的提交所以页面并没有进行刷新也就是说我再次点击提交他依旧会去添加而不是修改

但数据库要求数据唯一所以我在页面//2 处添加了刷新。

问题二因为元素为了让他只读我把他设置成了disabled 所以导致值没被传过去而引发了一些错误。。

注意：1 ajax为异步无刷新提交从请求到响应页面还是请求钱的那个页面值还是那些值并没有改变如果以后用此方式提交又用到了该页面的值来做其他业务是会有问题的

你可以根据需要动态改变页面的值或者重新刷新。

2. 可以用其他方式来进行设置元素只读参见

SSM3坏境下ajax和html disabled 引发的问题和总结

猜你在找的Ajax相关文章