由于最近项目需要,前端后台都完全采用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>

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

div加jquery实现iframe标签的功能的更多相关文章

  1. django2 用iframe标签完成 网页内嵌播放b站视频功能

    前言: 给自己的网站中加入视频资源,有两种方法,一种是用iframe标签引用外站资源,另一种则使用video标签,获取站内资源进行视频播放.其中前者顾名思义,是将视频资源上传到视频网站中,然后通过引用 ...

  2. 关于 <script type='text/template' > 的妙用 / 使用jquery获取iframe加载完成事件

    https://www.cnblogs.com/ddqyc/p/6200539.html <!DOCTYPE html> <html> <head> <met ...

  3. 用html给div加类似a标签的超链接(转)

    今天项目中遇到用html给div加类似a标签的超链接,回想半天,万幸还是想出来了. 分享一下啊: 1.通过window.open函数 <div onclick="window.open ...

  4. 解析Jquery取得iframe中元素的几种方法

    iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作,需要的朋友可以参考下   DOM方法:父窗口操作IFRAME:window.frames[&q ...

  5. 如何用iframe标签以及Javascript制作时钟?

    如何利用iframe标签以及Javascript制作时钟? 如何制作一个时钟呢?效果如下图所示: 这里的时钟会不停的走,但是下面的页面是不会变得,这样就实现了我们想要的效果了.下面我将分为以下几个方面 ...

  6. jquery ZeroClipboard实现黏贴板功能,兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  7. jquery操作iframe

    query取得iframe中元素的几种方法 在iframe子页面获取父页面元素 代码如下: $('#objId', parent.document); // 搞定... 在父页面 获取iframe子页 ...

  8. iframe标签flash遮盖页面元素问题——wmode参数

    最近做项目过程中,遇到各种小问题,所以打算通过博客园来记录各问题的解决办法. 这篇的问题背景是这样子的:项目是用的AngularJS框架,在某个页面上用了wangEditor富文本编辑器插件(gith ...

  9. 【Egret】里使用iframe标签达到内嵌多个web界面

    目的:Egret里使用iframe标签达到内嵌多个web界面,模式相当于主swf调用N个子swf的效果: 目前在做项目过程中,在使用iframe的时候,碰到了一些功能需求,以及解决方法如下: 一..在 ...

随机推荐

  1. CXF bus interceptor配置

    作用:BUS是cxf的支架,它主要担当扩展及拦截器提供者的角色. 在这里主要讲讲 bus的interceptor的功能 目前配置cxf的interceptor主要有2中方法: 1.通过xml配置文件的 ...

  2. [CentOs7]安装mysql(2)

    摘要 之前安装过一次mysql,最后配置,发现在本地无法连接,重启服务的时候一直卡在那里不动,感觉是安装的过程出问题,最后没办法还是卸载了,然后重新安装一下. [CentOs7]安装mysql Mys ...

  3. Linux下查看文件内容的命令

    查看文件内容的命令: cat     由第一行开始显示内容,并将所有内容输出 tac     从最后一行倒序显示内容,并将所有内容输出 more    根据窗口大小,一页一页的现实文件内容 less ...

  4. WCF-复合类型使用;传输图片

    一:WCF服务端 IService1.cs中: public interface IService1 { [OperationContract] [WebInvoke(Method = "P ...

  5. POJ 2411 Mondriaan&#39;s Dream

    状压DP Mondriaan's Dream Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 9938 Accepted: 575 ...

  6. CAN总线 SJA1000中断

    背景: 最近一直在使用C8051F340 + SJA1000来实现CAN通信,就SJA1000部分做个记录. 正文: 整个系统结构拓扑图如下: 两路CAN,C8051F340作为CPU,处理CAN与U ...

  7. BZOJ2171——K凹凸序列

    好吧,我承认是sb题QAQ BZOJ2171弱化版QAQ 这题考试的时候写的我快吐血了QAQ 0.题目大意:给一个序列,你可以随便修改,修改是将一个数+1或-1,一次修改的代价是1,问把这个数修改成x ...

  8. leetcode 142. Linked List Cycle II

    Given a linked list, return the node where the cycle begins. If there is no cycle, return null. Note ...

  9. Sqli-LABS通关笔录-11[sql注入之万能密码以及登录框报错注入]

    在这一关卡我学到了 1.万能密码的构造,大概的去揣测正常的SQL语句是如何的. 2. 3. 00x1 SQL万能密码的构造 在登录框当中可以添加了一个单引号.报错信息如下所示: 据此报错,我们大概的可 ...

  10. 寻找下一款Prisma APP:深度学习在图像处理中的应用探讨(阅读小结)

    原文链接:https://yq.aliyun.com/articles/61941?spm=5176.100239.bloglist.64.UPL8ec 某会议中的一篇演讲,主要讲述深度学习在图像领域 ...