jQuery dialog 异步调用ashx,webservice数据的代码


Posted in Javascript onAugust 03, 2010

本文用到了博客园TerryFeng的例子。
Html,JS代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="test_jQuery_dialog_Default" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>无标题页</title> 
</head> 
<body> 
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
<script src="js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$( 
function (){ 
$('#dialog').dialog({ 
autoOpen: false, 
width: 600, 
buttons: { 
"Ok": function() { 
alert("OK"); 
$(this).dialog("close"); 
}, 
"Cancel": function() { 
alert("Cancel"); 
$(this).dialog("close"); 
} 
} 
}); 
} 
) 
function show() 
{ 
$('#dialog').dialog('open'); 
} 
function ajax1() 
{ 
$.ajax({ 
type:"get", 
url:"action/test.ashx", 
data:{"time":Math.random()}, 
beforeSend:function(XMLHttpRequest) 
{ 
}, 
success:function(msg) 
{ 
alert(msg); 
} 
}); 
} 
function ajax2() 
{ 
$.ajax({ 
type:"post", 
contentType: "application/json", 
url:"action/WebService.asmx/HelloWorld", 
data:{}, 
dataType: 'json', 
success:function(msg) 
{ 
alert(msg); 
} 
}); 
} 
function ajax3(setvalue1,setvalue2) 
{ 
if(setvalue1.length==0||setvalue2.length==0) 
{ 
alert('请将两个文本框输入完整!'); 
return false; 
} 
$.ajax({ 
type:"post", 
contentType: "application/json", 
url:"action/WebService.asmx/HelloA", 
data:"{a:'"+setvalue1+"',b:'"+setvalue2+"'}", 
dataType: 'json', 
success:function(msg) 
{ 
alert(msg); 
} 
}); 
} 
//返回集合 
function ajax4() 
{ 
$.ajax({ 
type: "post", 
contentType: "application/json", 
url: "action/WebService.asmx/GetArray", 
data: "{'i':'10'}", 
success: function(msg) { 
alert(msg); 
} 
}); 
} 
//返回复合类型 
function ajax5() 
{ 
$.ajax({ 
type: "post", 
contentType: "application/json", 
url: "action/WebService.asmx/GetClass", 
data: "{}", 
success: function(msg) { 
$(msg).each(function() { 
alert(msg["ID"]+'___'+msg["Value"]); 
}); 
} 
}); 
} 
//返回dataset 
function ajax6() 
{ 
$.ajax({ 
type: "post", 
url: "action/WebService.asmx/GetDataSet", 
data: "{}", 
datatype:"xml", 
success: function(msg) { 
$(msg).find('Table1').each(function() { 
alert($(this).find("ID").text()+'___'+$(this).find("Value").text()); 
}); 
} 
}); 
} 
</script> 
<form id="form1" runat="server"> 
<input id="dialog_link" type="button" value="Show" onclick="show()" /> 
<div id="dialog" style="display: none; background-color: Aqua; width: 200px; height: 150px;"> 
WebService参数1<input type="text" id="txtMsg1" /><br/> 
WebService参数2<input type="text" id="txtMsg2" /><br/> 
<input type="button" value="调用Ashx一般处理程序" onclick="ajax1()" id="btn1" /> 
<input type="button" value="调用无参数WebService" onclick="ajax2()" id="btn2" /> 
<input type="button" value="调用有参数WebService" onclick="ajax3(txtMsg1.value,txtMsg2.value)" id="btn3" /> 
<input type="button" value="调用返回集合的WebService" onclick="ajax4()" id="btn4" /> 
<input type="button" value="调用返回复合类型的WebService" onclick="ajax5()" id="btn5" /> 
<input type="button" value="调用返回DataSet的WebService" onclick="ajax6()" id="btn6" /> 
<div id="dictionary"></div> 
In Dialog! 
</div> 
</form> 
</body> 
</html>

作者博客:http://www.cnblogs.com/qixuejia/
Javascript 相关文章推荐
js word表格动态添加代码
Jun 07 Javascript
IE的有条件注释判定IE版本详解(附实例代码)
Jan 04 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 Javascript
node.js中的fs.write方法使用说明
Dec 15 Javascript
深入浅析Bootstrap列表组组件
May 03 Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 Javascript
Bootstrap响应式表格详解
May 23 Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
Angular2 组件间通过@Input @Output通讯示例
Aug 24 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
基于jquery的让textarea自适应高度的插件
Aug 03 #Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
Aug 03 #Javascript
jQuery的实现原理的模拟代码 -3 事件处理
Aug 03 #Javascript
SlideView 图片滑动(扩展/收缩)展示效果
Aug 01 #Javascript
JavaScript和ActionScript的交互实现代码
Aug 01 #Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
Aug 01 #Javascript
jquery下onpropertychange事件的绑定方法
Aug 01 #Javascript
You might like
PHP那些琐碎的知识点(整理)
2017/05/20 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
PHP登录验证功能示例【用户名、密码、验证码、数据库、已登陆验证、自动登录和注销登录等】
2019/02/25 PHP
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
IE DOM实现存在的部分问题及解决方法
2009/07/25 Javascript
js控制鼠标事件移动及移出效果显示
2014/10/19 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
2016/01/21 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
JavaScript 过滤关键字
2017/03/20 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
使用InstantClick.js让页面提前加载200ms
2017/09/12 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
React通过redux-persist持久化数据存储的方法示例
2019/02/14 Javascript
React中this丢失的四种解决方法
2019/03/12 Javascript
如何自动化部署项目?折腾服务器之旅~
2019/04/16 Javascript
js如何验证密码强度
2020/03/18 Javascript
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
Python图像滤波处理操作示例【基于ImageFilter类】
2019/01/03 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
Python FTP文件定时自动下载实现过程解析
2019/11/12 Python
Python变量、数据类型、数据类型转换相关函数用法实例详解
2020/01/09 Python
在keras 中获取张量 tensor 的维度大小实例
2020/06/10 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
荷兰度假屋租赁网站:Aan Zee
2020/02/28 全球购物
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
村优秀党员事迹材料
2014/01/15 职场文书
优秀通讯员事迹材料
2014/01/28 职场文书
《少年王勃》教学反思
2014/04/27 职场文书
学习雷锋活动总结
2014/04/29 职场文书
夏季药店促销方案
2014/08/22 职场文书
四查四看整改措施
2014/09/19 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
《桂花雨》教学反思
2016/02/19 职场文书
新手,如何业余时间安排好写作、提高写作能力?
2019/10/21 职场文书
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫