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的固定表头和列头的代码
May 03 Javascript
javascript中RegExp保留小数点后几位数的方法分享
Aug 13 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
Jan 09 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
Jun 20 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
jQuery Validate设置onkeyup验证的实例代码
Dec 09 Javascript
bootstrap css样式之表单
Jan 19 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
Sep 28 Javascript
微信小程序之选项卡的实现方法
Sep 29 Javascript
如何在JavaScript中谨慎使用代码注释
Jun 21 Javascript
微信小程序模板消息推送的两种实现方式
Aug 27 Javascript
JavaScript文档加载模式以及元素获取
Jul 28 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中改变图片的尺寸大小的代码
2011/07/17 PHP
php中使用DOM类读取XML文件的实现代码
2011/12/14 PHP
php中检查文件或目录是否存在的代码小结
2012/10/22 PHP
基于jquery的让textarea自适应高度的插件
2010/08/03 Javascript
JavaScript获取页面上被选中文字的方法技巧
2015/03/13 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
Vue-resource拦截器判断token失效跳转的实例
2017/10/27 Javascript
详解Vue组件实现tips的总结
2017/11/01 Javascript
使用Vue实现图片上传的三种方式
2018/07/17 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
微信小程序canvas绘制圆角base64图片的实现
2019/08/18 Javascript
JS实现的碰撞检测与周期移动完整示例
2019/09/02 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
vue相关配置文件详解及多环境配置详细步骤
2020/05/19 Javascript
Vue axios获取token临时令牌封装案例
2020/09/11 Javascript
python之wxPython菜单使用详解
2014/09/28 Python
Python通过PIL获取图片主要颜色并和颜色库进行对比的方法
2015/03/19 Python
Python httplib模块使用实例
2015/04/11 Python
Python连接Redis的基本配置方法
2018/09/13 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
将Pytorch模型从CPU转换成GPU的实现方法
2019/08/19 Python
numpy 返回函数的上三角矩阵实例
2019/11/25 Python
Python使用configparser读取ini配置文件
2020/05/25 Python
美国半成品食材配送服务商:Home Chef
2018/01/25 全球购物
Java基础类库面试题
2013/09/04 面试题
建筑工程技术应届生自荐信
2013/09/27 职场文书
自我反省检讨书
2014/01/23 职场文书
2014年领班工作总结
2014/11/25 职场文书
2015年度保密工作总结
2015/04/24 职场文书
小学安全教育主题班会
2015/08/12 职场文书
企业文化学习心得体会
2016/01/21 职场文书
MySQL的安装与配置详细教程
2021/06/26 MySQL
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL