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 相关文章推荐
JS 建立对象的方法
Apr 21 Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
Mar 07 Javascript
jquery foreach使用示例
Sep 12 Javascript
jquery实现动态操作select选中
Feb 11 Javascript
javascript模拟C#格式化字符串
Aug 26 Javascript
jQuery实现ctrl+enter(回车)提交表单
Oct 19 Javascript
react-redux中connect的装饰器用法@connect详解
Jan 13 Javascript
JS根据json数组多个字段排序及json数组常用操作
Jun 06 Javascript
js图片查看器插件用法示例
Jun 22 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
Aug 04 Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 Javascript
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
Apr 09 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
IStream与TStream之间的相互转换
2008/08/01 PHP
PHP操作XML作为数据库的类
2010/12/19 PHP
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
新浪中用来显示flash的函数
2007/04/02 Javascript
jQuery :nth-child前有无空格的区别分析
2011/07/11 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
2011/09/29 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
js闭包实例汇总
2014/11/09 Javascript
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
JS实现十字坐标跟随鼠标效果
2017/12/25 Javascript
Node.js笔记之process模块解读
2018/05/31 Javascript
antd Upload 文件上传的示例代码
2018/12/14 Javascript
JavaScript实现的拼图算法分析
2019/02/13 Javascript
这15个Vue指令,让你的项目开发爽到爆
2019/10/11 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
2020/12/24 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
python获取豆瓣电影简介代码分享
2014/01/16 Python
低版本中Python除法运算小技巧
2015/04/05 Python
使用pandas对两个dataframe进行join的实例
2018/06/08 Python
Django结合ajax进行页面实时更新的例子
2019/08/12 Python
python模块常用用法实例详解
2019/10/17 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
浅谈python 中的 type(), dtype(), astype()的区别
2020/04/09 Python
30年同学聚会邀请函
2014/01/25 职场文书
教育英语专业毕业生的求职信
2014/03/13 职场文书
战略合作协议书范本
2014/04/18 职场文书
党员先进性教育整改措施
2014/09/18 职场文书
中小企业员工手册范本
2015/05/14 职场文书
心灵捕手观后感
2015/06/02 职场文书
色戒观后感
2015/06/12 职场文书
小学庆六一主持词
2015/06/30 职场文书
教你nginx跳转配置的四种方式
2022/07/07 Servers