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 相关文章推荐
为jQuery增加join方法的实现代码
Nov 28 Javascript
js 可拖动列表实现代码
Dec 13 Javascript
js用Date对象的setDate()函数对日期进行加减操作
Sep 18 Javascript
JS中Location使用详解
May 12 Javascript
Javascript实现的简单右键菜单类
Sep 23 Javascript
模拟javascript中的sort排序(简单实例)
Aug 17 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
Dec 27 Javascript
JQuery异步提交表单与文件上传功能示例
Jan 12 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
node.js之基础加密算法模块crypto详解
Sep 11 Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 Javascript
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
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超级全局变量
2010/01/26 PHP
那些年一起学习的PHP(二)
2012/03/21 PHP
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
输入值/表单提交参数过滤有效防止sql注入的方法
2013/12/25 PHP
PHP命名空间和自动加载类
2016/04/03 PHP
PHP API接口必备之输出json格式数据示例代码
2017/06/27 PHP
AngularJS中$interval的用法详解
2016/02/02 Javascript
AngularJS利用Controller完成URL跳转
2016/08/09 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
js实现自动轮换选项卡
2017/01/13 Javascript
微信小程序 图片加载(本地,网路)实例详解
2017/03/10 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
vue集成百度UEditor富文本编辑器使用教程
2018/09/21 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
2018/09/27 Javascript
vue input输入框关键字筛选检索列表数据展示
2020/10/26 Javascript
操作Windows注册表的简单的Python程序制作教程
2015/04/07 Python
在Python中使用swapCase()方法转换大小写的教程
2015/05/20 Python
Python Tkinter实现简易计算器功能
2018/01/30 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
浅析Django中关于session的使用
2019/12/30 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
css3 border旋转时的动画应用
2016/01/22 HTML / CSS
使用html2canvas.js实现页面截图并显示或上传的示例代码
2018/12/18 HTML / CSS
详细的大学生创业计划书模板
2014/01/27 职场文书
《莫高窟》教学反思
2014/02/25 职场文书
应聘英语教师求职信
2014/04/24 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
十周年庆典策划方案
2014/06/03 职场文书
佛光寺导游词
2015/02/10 职场文书
工作感想范文
2015/08/07 职场文书
八年级数学教学反思
2016/02/17 职场文书
八年级作文之友谊
2019/12/02 职场文书
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android