博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
div加jquery实现iframe标签的功能
阅读量:5902 次
发布时间:2019-06-19

本文共 2156 字,大约阅读时间需要 7 分钟。

  由于最近项目需要,前端后台都完全采用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参数如果有换行符等特殊字符需要自行处理。

调用方式:

许多地方还考虑不周,你有更好的处理方式吗?请告诉我。。。

转载地址:http://cqupx.baihongyu.com/

你可能感兴趣的文章
时序约束优先级_Vivado工程经验与各种时序约束技巧分享
查看>>
minio 并发数_MinIO 参数解析与限制
查看>>
flash back mysql_mysqlbinlog flashback 使用最佳实践
查看>>
mysql存储引擎模式_MySQL存储引擎
查看>>
java 重写system.out_重写System.out.println(String x)方法
查看>>
配置ORACLE 11g绿色版客户端和PLSQL远程连接环境
查看>>
ASP.NET中 DataList(数据列表)的使用前台绑定
查看>>
Linux学习之CentOS(八)--Linux系统的分区概念
查看>>
System.Func<>与System.Action<>
查看>>
asp.net开源CMS推荐
查看>>
csharp skype send message in winform
查看>>
MMORPG 游戏服务器端设计--转载
查看>>
HDFS dfsclient写文件过程 源码分析
查看>>
ubuntu下安装libxml2
查看>>
nginx_lua_waf安装测试
查看>>
WinForm窗体缩放动画
查看>>
JQuery入门(2)
查看>>
linux文件描述符
查看>>
传值引用和调用引用的区别
查看>>
hyper-v 无线网连接
查看>>