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 相关文章推荐
一个用js实现的页内搜索代码
May 23 Javascript
一句话JavaScript表单验证代码
Aug 02 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
Jun 14 Javascript
iframe如何动态创建及释放其所占内存
Sep 03 Javascript
js实现延时加载Flash的方法
Nov 26 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
May 04 Javascript
基于JS实现省市联动效果代码分享
Jun 06 Javascript
深入理解Node.js的HTTP模块
Oct 12 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
Oct 27 Javascript
BootStrap轮播HTML代码(推荐)
Dec 10 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
Jan 17 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
Mar 16 Javascript
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调用三种数据库的方法(1)
2006/10/09 PHP
PHP读取文件并可支持远程文件的代码分享
2012/10/03 PHP
php Hex RGB颜色值互换的使用
2013/05/10 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
Javascript基础教程之for循环
2015/01/18 Javascript
jQuery固定元素插件scrolltofixed使用指南
2015/04/21 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
2015/12/03 Javascript
详解JavaScript正则表达式之RegExp对象
2015/12/13 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
2016/02/01 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
Angular+Node生成随机数的方法
2017/06/16 Javascript
20170918 前端开发周报之JS前端开发必看
2017/09/18 Javascript
基于JavaScript实现前端数据多条件筛选功能
2020/08/19 Javascript
webpack4实现不同的导出类型
2019/04/09 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
2020/04/25 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
Python 实现删除某路径下文件及文件夹的实例讲解
2018/04/24 Python
在python中对变量判断是否为None的三种方法总结
2019/01/23 Python
利用Python实现kNN算法的代码
2019/08/16 Python
python加密解密库cryptography使用openSSL生成的密匙加密解密
2020/02/11 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
微软英国官方网站:Microsoft英国
2016/10/15 全球购物
印尼在线精品店:Berrybenka.com
2016/10/22 全球购物
欧铁通票官方在线销售网站:Eurail.com
2017/10/14 全球购物
什么是serialVersionUID
2016/03/04 面试题
《阳光》教学反思
2014/02/23 职场文书
项目经理任命书
2014/06/04 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书
2015年信息中心工作总结
2015/05/25 职场文书
公司借条范本
2015/05/25 职场文书
2015年秋季运动会加油稿
2015/07/22 职场文书
Python实现DBSCAN聚类算法并样例测试
2021/06/22 Python
python playwrigh框架入门安装使用
2022/07/23 Python