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 相关文章推荐
jQuery MD5加密实现代码
Mar 15 Javascript
autoPlay 基于jquery的图片自动播放效果
Dec 07 Javascript
JS 控件事件小结
Oct 31 Javascript
js实现页面转发功能示例代码
Aug 05 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
Nov 30 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 Javascript
微信小程序 教程之模板
Oct 18 Javascript
jQuery实现链接的title快速出现的方法
Feb 20 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
May 21 Javascript
vue编译打包本地查看index文件的方法
Feb 23 Javascript
Vue 的双向绑定原理与用法揭秘
May 06 Javascript
基于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反射机制用法实例
2014/08/28 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
JavaScript的继承的封装介绍
2013/10/15 Javascript
Javascript脚本实现静态网页加密实例代码
2013/11/05 Javascript
javascript动态修改Li节点值的方法
2015/01/20 Javascript
JavaScript中length属性的使用方法
2015/06/05 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
2016/06/09 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
2016/08/24 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
详解Vue中watch的详细用法
2018/11/28 Javascript
JS实现的点击按钮图片上下滚动效果示例
2019/01/28 Javascript
three.js显示中文字体与tween应用详析
2021/01/04 Javascript
python将多个文本文件合并为一个文本的代码(便于搜索)
2011/03/13 Python
python快速排序代码实例
2013/11/21 Python
小结Python用fork来创建子进程注意事项
2014/07/03 Python
10个易被忽视但应掌握的Python基本用法
2015/04/01 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
解决Python二维数组赋值问题
2019/11/28 Python
基于CSS3实现的漂亮Menu菜单效果代码
2015/09/10 HTML / CSS
基于IE10/HTML5 开发
2013/04/22 HTML / CSS
美国知名的女性服饰品牌:LOFT(洛芙特)
2016/08/05 全球购物
加拿大百叶窗和窗帘定制网站:Blinds
2017/01/30 全球购物
Vita Fede官网:在意大利手工制作,在纽约市设计
2019/10/25 全球购物
eHarmony英国:全球领先的认真恋爱约会平台之一
2020/11/16 全球购物
人力资源部经理助理岗位职责
2014/03/04 职场文书
销售队伍口号
2014/06/11 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
仓库管理制度范本
2015/08/04 职场文书
阿里云日志过滤器配置日志服务
2022/04/09 Servers
vscode内网访问服务器的方法
2022/06/28 Servers