由于最近项目需要，前端后台都完全采用div+css的方式布局。因而左思右想，有什么办法可以替代常用的iframe上下左右的布局方式，而且页面只是局部刷新。参考了许多前辈的资料，并加以整理，因而有了以下的方法。
需求：
1、由于是全局的div+css，由于每次提交的内容都会有所差异。
2、每个提交都会用到，因而需要一个通用方法。
3、返回的是html内容，因而需要指定一个显示区域
因而写一个可复用的方法就显得尤为重要了，因而有了以下的方法。上码：
/** * [btnsubmit 提交url并返回html] * @param {[type]} btnid [操作ID] * @param {[type]} linkattr [提交url链接] * @param {[type]} disid [返回内容的显示区域ID] * @param {[type]} prams [提交参数列表（根据id获取），多个时用"--"分割] * @return {[type]} [description] */ function btnsubmit(btnid, linkattr, disid, prams){ //console.log('btnid==========' + btnid); var $this = $('#' + btnid); $this.attr('disabled', 'true'); $('.pagecontentheader button').attr('disabled', 'true'); _clickTab = $this.attr(linkattr); // 找到链接a中的targer的值 var prams_data = ''; var prams_val = new Array(); //console.log($this.prop('tagName') + '===========prams==========' + _clickTab); if(prams.length != 0){ var prams_arr = prams.split('--'); var prams_str = ''; //console.log(prams_str + '===========22222=========='); for(var i = 0; i < prams_arr.length; i++){ var tagName = $('#' + prams_arr[i]).prop('tagName'); var pramval = ''; //console.log(tagName + '===========tagName=========='); if('SELECT' == tagName){ pramval = $('#' + prams_arr[i] + " option:selected").text(); //console.log(tagName + '===========prams_str==='+'#' + prams_arr[i] + " option:selected"+'=======' + pramval); }else{ pramval = $('#' + prams_arr[i]).val(); } prams_str = '"' + prams_arr[i] + '":"' + pramval + '"'; prams_val.push(prams_str); }; } var prams_data = "{" + prams_val.join(",") + "}"; prams_data = $.parseJSON(prams_data);//将字符串转成json格式的对象 //console.log(linkattr + '===========href==========' + prams_data); if(_clickTab){ $.post(_clickTab, prams_data, function(data){ $("#" + disid).html(data); } ); } }
注意：prams参数如果有换行符等特殊字符需要自行处理。
调用方式：
<button type="button" class="btn btn-default shiny" id="getRemark" target="__CONTROLLER__/remark" onclick="btnsubmit('getRemark', 'target', 'page-content', 'reservation')">更新备注</button>
<a id="linkOrderLst" target="__CONTROLLER__/lst" onclick="btnsubmit('linkOrderLst', 'target', 'page-content', '')">订单列表</a></li>
许多地方还考虑不周，你有更好的处理方式吗？请告诉我。。。