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 31 Javascript
js实现在字符串中提取数字
Nov 05 Javascript
JavaScript运行时库属性一览表
Mar 14 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
Aug 13 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
May 19 Javascript
原生js实现日期计算器功能
Feb 17 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
Dec 14 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
Jun 06 Javascript
node.js之基础加密算法模块crypto详解
Sep 11 Javascript
微信小程序自定义导航栏
Dec 31 Javascript
JS实现的贪吃蛇游戏案例详解
May 01 Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 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函数的方法
2013/11/13 PHP
php第一次无法获取cookie问题处理
2014/12/15 PHP
PHP获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
PHP 常用时间函数资料整理
2016/10/22 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
JavaScript 滚轮事件使用说明
2010/03/07 Javascript
潜说js对象和数组
2011/05/25 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
DOM基础教程之使用DOM控制表格
2015/01/20 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
2016/05/30 Javascript
jQuery实现的右下角广告窗体跟随效果示例
2016/09/16 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
慕课网题目之js实现抽奖系统功能
2017/09/19 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
nodejs微信开发之接入指南
2019/03/17 NodeJs
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
2019/09/27 Javascript
[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[41:21]夜魇凡尔赛茶话会 第三期02:看图识人
2021/03/11 DOTA
Python 文件管理实例详解
2015/11/10 Python
Python中用post、get方式提交数据的方法示例
2017/09/22 Python
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
Python切图九宫格的实现方法
2019/10/10 Python
pandas数据选取:df[] df.loc[] df.iloc[] df.ix[] df.at[] df.iat[]
2020/04/24 Python
HTML5+CSS3应用详解
2014/02/24 HTML / CSS
HTML5 input placeholder 颜色修改示例
2014/05/30 HTML / CSS
Johnston & Murphy官网: 约翰斯顿·墨菲牛津总统鞋
2018/01/09 全球购物
女性时尚网购:Chic Me
2019/07/30 全球购物
平面设计求职信
2014/03/10 职场文书
公安纪律作风整顿剖析材料
2014/10/10 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
PHP策略模式写法
2021/04/01 PHP