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 相关文章推荐
有道JavaScript监听浏览器的问题
Jun 23 Javascript
用js调用迅雷下载代码的二种方法
Apr 15 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
Nov 22 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
Jan 08 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
May 25 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
Sep 05 Javascript
Bootstrap风格的WPF样式
Dec 07 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
webpack独立打包和缓存处理详解
Apr 03 Javascript
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
JS排序算法之希尔排序与快速排序实现方法
Dec 12 Javascript
Vue 理解之白话 getter/setter详解
Apr 16 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支持中文字符串分割的函数
2015/05/28 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
PHP设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
2019/07/03 PHP
学习ExtJS TextField常用方法
2009/10/07 Javascript
js href的用法
2010/05/13 Javascript
解析瀑布流布局:JS+绝对定位的实现
2013/05/08 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
2013/11/26 Javascript
使用js实现关闭js弹出层的窗口
2014/02/10 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
2016/09/03 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
轻松学习JavaScript函数中的 Rest 参数
2019/05/30 Javascript
JS常用排序方法实例代码解析
2020/03/03 Javascript
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
[02:19]2014DOTA2国际邀请赛 专访820少年们一起去追梦吧
2014/07/14 DOTA
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
ansible作为python模块库使用的方法实例
2017/01/17 Python
Python正则简单实例分析
2017/03/21 Python
符合语言习惯的 Python 优雅编程技巧【推荐】
2018/09/25 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
Pytorch在dataloader类中设置shuffle的随机数种子方式
2020/01/14 Python
Django视图、传参和forms验证操作
2020/07/15 Python
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
党的群众路线整改落实情况汇报
2014/10/28 职场文书
质量保证书格式
2015/02/27 职场文书
如何写辞职信
2015/05/13 职场文书
解决Golang time.Parse和time.Format的时区问题
2021/04/29 Golang
Python基础之函数嵌套知识总结
2021/05/23 Python