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 相关文章推荐
Raphael带文本标签可拖动的图形实现代码
Feb 20 Javascript
在js文件中如何获取basePath处理js路径问题
Jul 10 Javascript
可简单避免的三个JS发布错误的详细介绍
Aug 02 Javascript
鼠标拖动实现DIV排序示例代码
Oct 14 Javascript
Angular2 (RC4) 路由与导航详解
Sep 21 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
Dec 05 Javascript
JS中parseInt()和map()用法分析
Dec 16 Javascript
Three.js的使用及绘制基础3D图形详解
Apr 27 Javascript
vue-router配合ElementUI实现导航的实例
Feb 11 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
vue自定义表单生成器form-create使用详解
Jul 19 Javascript
如何用JS模拟实现数组的map方法
Jul 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
简单的PHP图片上传程序
2008/03/27 PHP
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
php全排列递归算法代码
2012/10/09 PHP
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
php使用ereg验证文件上传的方法
2014/12/16 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
javascript getElementsByName()的用法说明
2009/07/31 Javascript
JQuery 学习笔记01 JQuery初接触
2010/05/06 Javascript
instanceof和typeof运算符的区别详解
2014/01/06 Javascript
JavaScript的作用域和块级作用域概念理解
2014/09/21 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
jQuery 更改checkbox的状态,无效的解决方法
2016/07/22 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
Bootstrap栅格系统学习笔记
2016/11/25 Javascript
jquery结合html实现中英文页面切换
2016/11/29 Javascript
js自定义瀑布流布局插件
2017/05/16 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
python实现文件分组复制到不同目录的例子
2014/06/04 Python
Python Web框架Flask中使用七牛云存储实例
2015/02/08 Python
详解Python 正则表达式模块
2018/11/05 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
Python实现仿射密码的思路详解
2020/04/23 Python
Python reques接口测试框架实现代码
2020/07/28 Python
python实现批处理文件
2020/07/28 Python
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
马来西亚奢侈品牌购物商城:Valiram 247
2020/09/29 全球购物
告诉你怎样写创业计划书
2014/01/27 职场文书
就业协议书范本
2014/04/11 职场文书
食品安全宣传标语
2014/06/07 职场文书
python opencv检测直线 cv2.HoughLinesP的实现
2021/06/18 Python
Github 使用python对copilot做些简单使用测试
2022/04/14 Python