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 相关文章推荐
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
jquery中的sortable排序之后的保存状态的解决方法
Jan 28 Javascript
推荐20家国外的脚本下载网站
Apr 28 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
Oct 07 Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 Javascript
浅谈jquery拼接字符串效率比较高的方法
Feb 22 Javascript
JavaScript中重名的函数与对象示例详析
Sep 28 Javascript
微信小程序仿朋友圈发布动态功能
Jul 15 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 Javascript
基于node简单实现RSA加解密的方法步骤
Mar 21 Javascript
javascript 设计模式之组合模式原理与应用详解
Apr 08 Javascript
JavaScript实现前端网页版倒计时
Mar 24 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
基于mysql的论坛(6)
2006/10/09 PHP
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
laravel利用中间件做防非法登录和权限控制示例
2019/10/21 PHP
jQuery Selector选择器小结
2010/05/06 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
javascript中parentNode,childNodes,children的应用详解
2013/12/17 Javascript
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
2014/01/09 Javascript
node.js正则表达式获取网页中所有链接的代码实例
2014/06/03 Javascript
JSON格式的键盘编码对照表
2015/01/29 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
2016/05/26 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
2016/11/04 Javascript
详解js界面跳转与值传递
2016/11/22 Javascript
JS原型与原型链的深入理解
2017/02/15 Javascript
JS常用正则表达式总结【经典】
2017/05/12 Javascript
javascript实现非常简单的小数取整功能示例
2017/06/13 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
2018/05/26 jQuery
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
python k-近邻算法实例分享
2014/06/11 Python
Python数据类型详解(一)字符串
2016/05/08 Python
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
python 利用for循环 保存多个图像或者文件的实例
2018/11/09 Python
详解Python进阶之切片的误区与高级用法
2018/12/24 Python
用Python+OpenCV对比图像质量的几种方法
2019/07/15 Python
在pandas中遍历DataFrame行的实现方法
2019/10/23 Python
浅谈在JupyterNotebook下导入自己的模块的问题
2020/04/16 Python
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
教师个人事迹材料
2014/12/17 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书