jquery中使用ajax获取远程页面信息


Posted in Javascript onNovember 13, 2011

效果图如下:

jquery中使用ajax获取远程页面信息
先贴前台代码:其中关键代码是 通过span标记的data(自定义属性)绑定Id

<asp:GridView ID="GvCollect" runat="server" AutoGenerateColumns="False" 
DataKeyNames="Id" onrowdeleting="GvCollect_RowDeleting" 
EnableModelValidation="True"> 
<Columns> 
<asp:BoundField DataField="Id" HeaderText="编号" /> 
<asp:TemplateField HeaderText="标题"> 
<ItemTemplate> 
<span class="showCon" data='<%#Eval("Id")%>'><%# Eval("Title") %></span> 
</ItemTemplate> 
</asp:TemplateField> 
<asp:BoundField DataField="AddTime" HeaderText="时间" /> 
<asp:TemplateField HeaderText="操作"> 
<ItemTemplate> 
<a href="Show_Coll.aspx?id=<%# DataBinder.Eval(Container.DataItem,"Id") %>" target="_blank">查看</a> 
<asp:LinkButton ID="Lbtn" runat="server" CommandName="delete" OnClientClick="return confirm('确定删除')">删除</asp:LinkButton> 
</ItemTemplate> 
</asp:TemplateField> 
</Columns> 
</asp:GridView> 
<table width="100%"> 
<tr> 
<td> 
<asp:Button ID="BtnAllMove" runat="server" Text="全部入库" onclick="BtnAllMove_Click" /> 
<asp:Button ID="BtnAllDelete" runat="server" Text="清空所有记录" onclick="BtnAllDelete_Click" /> 
</td> 
<td> 
 </td> 
</tr> 
<tr> 
<td> 
 </td> 
<td> 
 </td> 
</tr> 
</table>

然后是弹出层快代码:
<div id="divTip" title="内容显示" style="overflow:auto;">
</div>
接下里看css样式引用文件和js调用(我用的是jqueryUI库)
<link href="js/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" /> 
<script src="js/jquery-1.4.1.min.js" type="text/javascript"></script> 
<script src="js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>

<script type="text/javascript"> 
$(function () { 
//初始化弹出层,加载是不显示 
$("#divTip").dialog({ 
show: null, 
width: 500, 
height: 500, 
bgiframe: false, 
autoOpen: false, 
buttons: { 
"Ok": function () { 
$(this).dialog("close"); 
}, 
"Cancel": function () { 
$(this).dialog("close"); 
} 
} 
}); 
//取消对象自身的事件冒泡 
$("#divTip").bind("click", function (event) { 
event.stopPropagation(); 
}); 
//动态提示类弹出层,点击对象时弹出装载页面 
$(".showCon").css("cursor", "pointer").click(function (event) { 
$("*").stop(); 
$("#divTip").dialog("close"); 
event.stopPropagation(); 
var top = $(event.target).offset().top + 20; 
var left = $(event.target).offset().left; 
//取得对象源的id 
var objId = $(event.target).attr("data"); 
// alert(objId); 
$.ajax({ 
type: "POST", 
url: "Show_Coll.aspx", 
data: "id=" + objId, 
success: function (con) { 
$("#divTip").html(con); 
} 
}); 
// $("#divTip").html(objId); 
$("#divTip").dialog("option", "position", [left, top]); 
$("#divTip").dialog("open"); 
}); 
}) 
</script>

接下里是服务器页面:
一般我们获取参数都是 Request.QueryString[""],但是这个是获取url中的参数,而现在是获取http对象中的,,所以用Request[""],
否则取不出数据
//Request.QueryString["id"] == null 
if (Request["id"]==null) 
return 0; 
return Convert.ToInt32(Request["id"].ToString());
Javascript 相关文章推荐
列表内容的选择
Jun 30 Javascript
JavaScript Timer实现代码
Feb 17 Javascript
JavaScript 选中文字并响应获取的实现代码
Aug 28 Javascript
jquery判断浏览器后退时候弹出消息的方法
Aug 11 Javascript
小结Node.js中非阻塞IO和事件循环
Sep 18 Javascript
实现js保留小数点后N位的代码
Nov 13 Javascript
js实时获取并显示当前时间的方法
Jul 31 Javascript
JavaScript中的函数(二)
Dec 23 Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 Javascript
探讨跨域请求资源的几种方式(总结)
Dec 02 Javascript
了解JavaScript函数中的默认参数
May 30 Javascript
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
JQuery模板插件 jquery.tmpl 动态ajax扩展
Nov 10 #Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
Nov 10 #Javascript
Javascript中的isNaN函数使用说明
Nov 10 #Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
Nov 09 #Javascript
关于二级域名下使用一级域名下的COOKIE的问题
Nov 07 #Javascript
用jquery和json从后台获得数据集的代码
Nov 07 #Javascript
JS重要知识点小结
Nov 06 #Javascript
You might like
用PHP实现图象锐化代码
2007/06/14 PHP
php代码审计比较有意思的例子
2014/05/07 PHP
轻松掌握php设计模式之访问者模式
2016/09/23 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
jQuery简单图表peity.js使用示例
2014/05/02 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
JavaScript里四舍五入函数round用法实例
2015/04/06 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
微信小程序非跳转式组件授权登录的方法示例
2019/05/22 Javascript
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
Python使用装饰器进行django开发实例代码
2018/02/06 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
python re正则匹配网页中图片url地址的方法
2018/12/20 Python
python实现字符串加密成纯数字
2019/03/19 Python
PYQT5设置textEdit自动滚屏的方法
2019/06/14 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
基于opencv实现简单画板功能
2020/08/02 Python
HTML5 Canvas 实现K线图的示例代码
2019/12/23 HTML / CSS
New Balance法国官方网站:购买鞋子和服装
2019/09/01 全球购物
雷朋巴西官方商店:Ray-Ban Brasil
2020/07/21 全球购物
会计与审计专业大专生求职信
2013/10/03 职场文书
英文简历中的自我评价用语
2013/12/09 职场文书
施工班组长岗位职责
2014/01/05 职场文书
高一新生军训方案
2014/05/12 职场文书
大型演出策划方案
2014/05/28 职场文书
公司员工安全协议书
2014/11/21 职场文书
贫困证明书范文
2015/06/16 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书
餐饮行业关注的9大营销策略
2019/08/26 职场文书
Python写情书? 10行代码展示如何把情书写在她的照片里
2022/04/21 Python