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 相关文章推荐
使用Json比用string返回数据更友好,也更面向对象一些
Sep 13 Javascript
手机号码,密码正则验证
Sep 04 Javascript
jQuery实现购物车表单自动结算效果实例
Aug 10 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
Mar 14 Javascript
ES6新特性八:async函数用法实例详解
Apr 21 Javascript
Vue.js中组件中的slot实例详解
Jul 17 Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 Javascript
vue父组件向子组件传递多个数据的实例
Mar 01 Javascript
Vue前后端不同端口的实现方法
Sep 19 Javascript
使用webpack打包后的vue项目如何正确运行(express)
Oct 26 Javascript
如何利用ES6进行Promise封装总结
Feb 11 Javascript
JavaScript中关于预编译、作用域链和闭包的理解
Mar 31 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目录导航文件代码
2006/10/09 PHP
通过table标签,PHP输出EXCEL的实现方法
2013/07/24 PHP
destoon网站转移服务器后搜索汉字出现乱码的解决方法
2014/06/21 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
关于jquery的多个选择器的使用示例
2013/10/18 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
2016/11/07 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
Vue 换肤的示例实践
2018/01/23 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
2018/11/30 Javascript
小程序实现人脸识别功能(百度ai)
2018/12/23 Javascript
新手如何快速理解js异步编程
2019/06/24 Javascript
浅谈Vue.use到底是什么鬼
2020/01/21 Javascript
原生JS实现烟花效果
2020/03/10 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
JS常用跨域方法实现原理解析
2020/12/09 Javascript
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
[07:09]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant 选手采访
2021/03/11 DOTA
Python两个整数相除得到浮点数值的方法
2015/03/18 Python
Python和JavaScript间代码转换的4个工具
2016/02/22 Python
Python实现替换文件中指定内容的方法
2018/03/19 Python
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
python3.x 将byte转成字符串的方法
2018/07/17 Python
Python实现王者荣耀自动刷金币的完整步骤
2021/01/22 Python
洲际酒店集团大中华区:IHG中国
2016/08/17 全球购物
意大利专业化妆品品牌:KIKO MILANO
2017/02/01 全球购物
super()与this()的区别
2016/01/17 面试题
JPA的特点
2014/10/25 面试题
党的群众路线教育实践活动心得体会(企业)
2014/11/03 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
车间统计员岗位职责
2015/04/14 职场文书
《半截蜡烛》教学反思
2016/02/19 职场文书
Python实现文本文件拆分写入到多个文本文件的方法
2021/04/18 Python
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python