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 相关文章推荐
NiftyCube——轻松实现圆角边框
Feb 20 Javascript
javascript英文日期(有时间)选择器
May 02 Javascript
javascript之卸载鼠标事件的代码
May 14 Javascript
Bootstrap入门书籍之(三)栅格系统
Feb 17 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
Aug 11 Javascript
EasyUI创建人员树的实例代码
Sep 15 Javascript
layui中layer前端组件实现图片显示功能的方法分析
Oct 13 Javascript
vue写h5页面的方法总结
Feb 12 Javascript
详解微信小程序自定义组件的实现及数据交互
Jul 22 Javascript
解决layui弹出层layer的area过大被遮挡的问题
Sep 21 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
Mar 03 Javascript
详解element-ui动态限定的日期范围选择器代码片段
Jul 03 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
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
mysql建立外键
2006/11/25 PHP
PHP开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
thinkphp特殊标签用法概述
2014/11/24 PHP
在php和MySql中计算时间差的方法详解
2015/03/27 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
jquery 将disabled的元素置为enabled的三种方法
2009/07/25 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
2013/05/28 Javascript
javascript自动给文本url地址增加链接的方法分享
2014/01/20 Javascript
一个实用的图片切换支持点击切换和自动轮播
2014/09/09 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
jQuery图片渐变特效的简单实现
2016/06/25 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
2017/07/11 Javascript
在vue中封装可复用的组件方法
2018/03/01 Javascript
checkbox在vue中的用法小结
2018/11/13 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
[00:39]DOTA2上海特级锦标赛 Liquid战队宣传片
2016/03/04 DOTA
python使用PythonMagick将jpg图片转换成ico图片的方法
2015/03/26 Python
python开发之基于thread线程搜索本地文件的方法
2015/11/11 Python
Python解析、提取url关键字的实例详解
2018/12/17 Python
windows环境中利用celery实现简单任务队列过程解析
2019/11/29 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
python开发一款翻译工具
2020/10/10 Python
python定时截屏实现
2020/11/02 Python
CSS3制作漂亮的照片墙的实现代码
2016/06/08 HTML / CSS
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
Laravel中Kafka的使用详解
2021/03/24 PHP
大学生毕业自我评价范文分享
2013/11/07 职场文书
ktv收银员岗位职责
2013/12/16 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
离婚协议书格式
2014/11/21 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
保护环境的宣传语
2015/07/13 职场文书
《传颂之物 虚伪的假面》BD发售宣传CM公开
2022/04/04 日漫