mvc实现前后端数据交互(子页面赋值父页面)

相信大家在编程过程中都已经轻车熟路的掌握了前后端数据进行交互的各种示例，今天我来给大家分享一下mvc前后端交互数据的一整套流程。示例如下：

前端检索代码如下：步骤1

选择入库提交
编号
     
姓名
 
性别
     
职务
 
单位
  
爱好
 
备注
 
分条目
 
${var.CW_DATE}
${var.CW_DATE}
${var.CW_DATE}
${var.CW_DATE}
${var.CW_DATE}
${var.CW_DATE}
${var.CW_DATE}
${var.CW_DATE}
您无权查看
没有相关数据
//提交function getPartsList(){var code=$("#code").val();var xm =$("#xm").val();if(code=""){$("#code").tips({side:3,    msg:'请输入编号',     bg:'#AE81FF',     time:1});$("#code").focus();}else if(xm =""){$("#xm").tips({side:3,    msg:'请输入姓名',     bg:'#AE81FF',     time:1});$("#xm").focus();}else{//打开一个新页面layer.open({     type: 2,     title: '选择人员',     shadeClose: true,     shade: 0.5,     area: ['1080px', '600px'],     content: 'test/worker.do     //如果带参数拼接上下面的字符串     //?company_id='+company_id    });}//入库提交function submitMatel(){var code= $("#code").val(); //编号var xm= $("#xm").val(); //姓名var sex= "";var zw= "";var dw= "";var likely= "";var bz= "";var fentiaomu = "";//分条目if($("input[name='ids']:checked").length==0){for(var i=0;i < document.getElementsByName('ids').length;i++){code+= document.getElementsByName('ids')[i].value+',';}}else{for(var i=0;i < document.getElementsByName('ids').length;i++){  if(document.getElementsByName('ids')[i].checked){  code+= document.getElementsByName('ids')[i].value+',';  }}}var idarr = code.split(",");for(var i=0;i<idarr.length;i++){if(idarr[i]==''){break;}code += $("#code"+idarr[i]).val()+";";xm+= $("#xm"+idarr[i]).val()+";";sex+=$("#sex"+idarr[i]).val()+";";zw+= $("#zw"+idarr[i]).val()+";";dw+=$("#dw"+idarr[i]).val()+";";likely+= $("#likely"+idarr[i]).val()+";";bz+=$("#bz"+idarr[i]).val()+";";fentiaomu +=$("#fentiaomu"+idarr[i]).val()+";";}$.ajax({ type: "POST",     url:'test/Save.do',  data:{code:code,xm:xm,sex:sex,    zw:zw,dw:dw,likely:likely,    bz:bz,fentiaomu:fentiaomu},  dataType:'json',  cache: false,  success : function(data) {  if("success" != data.result){alert("成功!") }else{ $("#addmaterial").tips({side:3,     msg:'保存成功！！！',     bg:'#AE81FF',     time:1     }); $("#code").focus(); $("#xm").val(''); $("#sex").val(''); $("#zw").val(''); $("#dw").val(''); $("#likely").val(''); $("#bz").val('0'); $("#fentiaomu").val('0'); $("#trcodes tr").remove(); $("#trcodes").append('没有相关数据'); }  }})}

后台代码接收示例：步骤2

/*** 提交*/@RequestMapping(value="/worker")public  ModelAndView worker(ModelAndView mv) throws Exception{PageData pd = new PageData();pd = this.getPageData();mv.setViewName("test/test/ziyepage");mv.addObject("varList", service.listAll(pd););//人员选择//mv.addObject("QX",Jurisdiction.getHC());//按钮权限return mv;}/** * 物料入库  提交 * @throws Exception */@RequestMapping(value="/Save")@ResponseBodypublic Object Save(Page page)throws Exception{String errInfo="success";Map map = new HashMap();map.put("result", errInfo);return AppUtil.returnObject(new PageData(), map);}

后台返回页面代码示例：步骤3

序号
     
姓名
     
性别
 
职务
   
单位
 
爱好
 
备注
 
${var.code}
${var.xm}
${var.sex}
${var.zw}
${var.dw}
${var.likely}
${var.bz}
您无权查看
没有相关数据
添加关闭返回
//选择function save(){var str = '';for(var i=0;i < document.getElementsByName('ids').length;i++){  if(document.getElementsByName('ids')[i].checked){  if(str=='') str += document.getElementsByName('ids')[i].value;  else str += ',' + document.getElementsByName('ids')[i].value;  }}if(str==''){$("#zcheckbox").tips({side:1,     msg:'点这里选择',     bg:'#AE81FF',     time:8 });return;}var arr_ids = str.split(",");var quantitiyval=0;var amountval=0;if(parent.$("#trcodes").find("tr td").length==1){parent.$("#trcodes tr").remove();}for(var j=0;j<arr_ids.length;j++){var tabletr = parent.document.getElementById(arr_ids[j]);if(arr_ids[j]=='' || tabletr!=null){}else{var code= document.getElementById("rec_id"+arr_ids[j]).innerHTML;var xm = document.getElementById("code"+arr_ids[j]).innerHTML;var sex= document.getElementById("name"+arr_ids[j]).innerHTML;var zw= document.getElementById("guage"+arr_ids[j]).innerHTML;var dw= document.getElementById("pos_name"+arr_ids[j]).innerHTML;var likely= document.getElementById("lot_pcs"+arr_ids[j]).innerHTML;var bz= document.getElementById("m_code"+arr_ids[j]).innerHTML;parent.$("#trcodes").append(''+''+''+''+''+''+''+''+''+''+'NY'+'');}}  parent.$("#totalamountvalue").text('汇总数量:'+quantitiyval+'金额合计:'+amountval); parent.layer.closeAll();}

欢迎大家评论转发收藏…