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 相关文章推荐
Javascript 兼容firefox的一些问题
May 21 Javascript
js删除所有的cookie的代码
Nov 25 Javascript
javascript实现的DES加密示例
Oct 30 Javascript
基于jQuery实现的菜单切换效果
Oct 16 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
Dec 06 Javascript
Web前端框架Angular4.0.0 正式版发布
Mar 28 Javascript
React Native之prop-types进行属性确认详解
Dec 19 Javascript
Vue 获取数组键名的方法
Jun 21 Javascript
详解angular2 控制视图的封装模式
Dec 27 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
Jan 08 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
Jun 17 Javascript
vue中使用rem布局代码详解
Oct 30 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
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
在PHP中使用curl_init函数的说明
2010/11/02 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
js中prototype用法详细介绍
2013/11/14 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
JavaScript数据结构和算法之二叉树详解
2015/02/11 Javascript
Windows系统下Node.js的简单入门教程
2015/06/23 Javascript
JS打字效果的动态菜单代码分享
2015/08/21 Javascript
超实用的JavaScript表单代码段
2016/02/26 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
jQuery操作json常用方法示例
2017/01/04 Javascript
vue.js中过滤器的使用教程
2017/06/08 Javascript
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
vue 组件 全局注册和局部注册的实现
2018/02/28 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
vue 虚拟DOM的原理
2020/10/03 Javascript
Python实现图片添加文字
2019/11/26 Python
PyTorch学习:动态图和静态图的例子
2020/01/06 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
利用Python制作动态排名图的实现代码
2020/04/09 Python
Django 用户认证Auth组件的使用
2020/11/30 Python
selenium与xpath之获取指定位置的元素的实现
2021/01/26 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
戛纳奢侈品商店:Jacques Loup法国
2019/11/04 全球购物
工业学校毕业生自荐书
2014/01/03 职场文书
怎样写好创业计划书的内容
2014/02/06 职场文书
解除合同协议书
2014/04/17 职场文书
感恩教育活动总结
2014/05/05 职场文书
三峡大坝导游词
2015/01/31 职场文书
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫