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 无符号右移运算符
Apr 17 Javascript
学习ExtJS 访问容器对象
Oct 07 Javascript
JavaScript 事件记录使用说明
Oct 20 Javascript
为Extjs加加速(javascript加速)
Aug 19 Javascript
javascript中onmouse事件在div中失效问题的解决方法
Jan 09 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 Javascript
使用Javascript写的2048小游戏
Nov 25 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
Apr 28 Javascript
解决vue init webpack 下载依赖卡住不动的问题
Nov 09 Javascript
vue3弹出层V3Popup实例详解
Jan 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中的超全局变量
2006/10/09 PHP
PHPMailer使用教程(PHPMailer发送邮件实例分析)
2012/12/06 PHP
php中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
php内核解析:PHP中的哈希表
2014/01/30 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
模拟用户点击弹出新页面不会被浏览器拦截
2014/04/08 Javascript
JSON遍历方式实例总结
2015/12/07 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
详解Vue-cli代理解决跨域问题
2017/09/27 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
优雅的在React项目中使用Redux的方法
2018/11/10 Javascript
微信小程序常用简易小函数总结
2019/02/01 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
Jquery滑动门/tab切换实现方法完整示例
2020/06/05 jQuery
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
python解析多层json操作示例
2019/12/30 Python
使用Python 自动生成 Word 文档的教程
2020/02/13 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
Python 通过正则表达式快速获取电影的下载地址
2020/08/17 Python
Python3如何在服务器打印资产信息
2020/08/27 Python
如何用Python绘制3D柱形图
2020/09/16 Python
MyFrenchPharma中文网:最大的法国药妆平台
2016/10/07 全球购物
金融专业个人求职信
2013/09/22 职场文书
大学毕业感言100字
2014/02/03 职场文书
新年团拜会主持词
2014/04/02 职场文书
市级优秀班主任事迹材料
2014/05/13 职场文书
合作与交流自我评价
2015/03/09 职场文书
化验室安全管理制度
2015/08/06 职场文书
2019年思想汇报
2019/06/20 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书
Python matplotlib多个子图绘制整合
2022/04/13 Python