ajax-点击详细信息,弹出一个层显示所有的信息,信息是从后台获取的

作者:用户 来源:互联网 浏览:791 次 时间:2016-01-18 14:47:49

ajax数据后台显示

ajax-点击详细信息,弹出一个层显示所有的信息,信息是从后台获取的 - 摘要: 点击详细信息,弹出一个层显示所有的信息,信息是从后台获取的页面是html,数据是用ajax调用Servlet获取的。信息是分两部分,第一部分是会员信息,第二部分是会员报名的信息,在一个层上显示。jqu

问题描述

点击详细信息,弹出一个层显示所有的信息,信息是从后台获取的

页面是html,数据是用ajax调用Servlet获取的。

信息是分两部分,第一部分是会员信息,第二部分是会员报名的信息,在一个层上显示。

解决方案

jquery load下内容到你的曾就好。。

DEMO,你的jsp只返回需要的html代码,不要连html,body标签那种一起返回了,要不可能页面会错乱

 <table id="tbUser">
<tr><td><a href="read.jsp?id=你的数据id" ajax="1">报名信息</a></td></tr>
.....其他的数据行
</table>
<style>
#layer{position:absolute;border:solid 1px #000;width:300px;height:200px;display:none;top:50%;left:50%;margin-left:-150px;margin-top:-100px}
</style>
<div id="layer"></div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
    $(function () {
        $('#tbUser a[ajax]').click(function () {
            $('#layer').load(this.href, function () { $('#layer').show(); });
            return false;
        })
    });
    $(document).click(function (e) {
        if (e.target.id != 'layer' && !$.contains($('#layer')[0], e.target)) $('#layer').hide();
    });
</script>
解决方案二:

我其实都不太懂这些。谢谢你的回答啊~~~

【云栖快讯】阿里云栖开发者沙龙(Java技术专场)火热来袭!快来报名参与吧!  详情请点击
云栖社区(yq.aliyun.com)为您免费提供ajax-点击详细信息,弹出一个层显示所有的信息,信息是从后台获取的相关信息,包括 ajax数据后台 显示 的信息 ,所有ajax-点击详细信息,弹出一个层显示所有的信息,信息是从后台获取的版权归作者所有,本社区不拥有所有权,也不承担相关法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:yqgroup@service.aliyun.com 进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。 该页面h5页面的地址是:https://m.aliyun.com/yunqi/wenzhang/show_63983,您可以点击ajax-点击详细信息,弹出一个层显示所有的信息,信息是从后台获取的-手机站访问。
KubeCon2018西雅图在前线(一):云原生概念已经深入人心
弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

现在注册,免费体验40+云产品,及域名优惠!

云服务器9.9元/月,大学必备

热点导航