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实现计算代码行数的简单方法附代码
Aug 13 Javascript
jquery判断checkbox(复选框)是否被选中的代码
Oct 20 Javascript
js arguments对象应用介绍
Nov 28 Javascript
基于javascipt-dom编程 table对象的使用
Apr 22 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
Dec 29 Javascript
JS数组去重(4种方法)
Mar 27 Javascript
微信小程序实现下拉框功能
Jul 16 Javascript
vue 地区选择器v-distpicker的常用功能
Jul 23 Javascript
js中Function引用类型常见有用的方法和属性详解
Dec 11 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 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制作静态网站的模板框架(三)
2006/10/09 PHP
探讨PHP删除文件夹的三种方法
2013/06/09 PHP
PHP创建PowerPoint2007文档的方法
2015/12/10 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面
2016/03/21 PHP
js函数般调用正则
2008/04/08 Javascript
jquery 添加节点的几种方法介绍
2013/09/04 Javascript
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
用C/C++来实现 Node.js 的模块(二)
2014/09/24 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
javascript实现图片上传前台页面
2015/08/18 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
2017/02/14 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
JS闭包用法实例分析
2017/03/27 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
2017/04/24 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
2017/05/12 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
简述vue路由打开一个新的窗口的方法
2018/11/29 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
解决Nuxt使用axios跨域问题
2020/07/06 Javascript
Django的session中对于用户验证的支持
2015/07/23 Python
python调用fortran模块
2016/04/08 Python
Python爬虫信息输入及页面的切换方法
2018/05/11 Python
把pandas转换int型为str型的方法
2019/01/29 Python
tensorflow保持每次训练结果一致的简单实现
2020/02/17 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
HTML5 自动聚焦(autofocus)属性使用介绍
2013/08/07 HTML / CSS
护士实习鉴定范文
2013/12/22 职场文书
餐厅总厨求职信
2014/03/04 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
佛光寺导游词
2015/02/10 职场文书
家属联谊会致辞
2015/07/31 职场文书
先进教师个人主要事迹材料
2015/11/03 职场文书
oracle表分区的概念及操作
2021/04/24 Oracle
使用SQL实现车流量的计算的示例代码
2022/02/28 SQL Server