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函数中执行C#代码中的函数方法总结
Aug 07 Javascript
jQuery中$.fn的用法示例介绍
Nov 05 Javascript
js写的评论分页(还不错)
Dec 23 Javascript
JS检测输入字符是否包含非法字符的示例代码
Feb 11 Javascript
JavaScript中逗号运算符介绍及使用示例
Mar 13 Javascript
JQuery中DOM加载与事件执行实例分析
Jun 13 Javascript
跟我学习javascript的隐式强制转换
Nov 16 Javascript
如何利用模板将HTML从JavaScript中抽离
Oct 08 Javascript
vue addRoutes实现动态权限路由菜单的示例
May 15 Javascript
微信小程序冒泡事件及其阻止方法实例分析
Dec 06 Javascript
js实现一个页面多个倒计时的3种方法
Feb 25 Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 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
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
phpMyAdmin无法登陆的解决方法
2017/04/27 PHP
JS类库Bindows1.3中的内存释放方式分析
2007/03/08 Javascript
JavaScript 字符串乘法
2009/08/20 Javascript
基于jquery的一个图片hover的插件
2010/04/24 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
2012/02/10 Javascript
js读取注册表的键值示例
2013/09/25 Javascript
用于deeplink的js方法(判断手机是否安装app)
2014/04/02 Javascript
Angular实现搜索框及价格上下限功能
2018/01/19 Javascript
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
微信小程序实现的自定义分享功能示例
2019/02/12 Javascript
JavaScript如何获取一个元素的样式信息
2019/07/29 Javascript
Vue调用后端java接口的实例代码
2019/10/28 Javascript
vue实现计步器功能
2019/11/01 Javascript
深入分析jQuery.one() 函数
2020/06/03 jQuery
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
python中将阿拉伯数字转换成中文的实现代码
2011/05/19 Python
Python的Flask开发框架简单上手笔记
2015/11/16 Python
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
实例讲解Python编程中@property装饰器的用法
2016/06/20 Python
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
Python 在OpenCV里实现仿射变换—坐标变换效果
2019/08/30 Python
PyTorch中Tensor的数据统计示例
2020/02/17 Python
Python 剪绳子的多种思路实现(动态规划和贪心)
2020/02/24 Python
浅析python标准库中的glob
2020/03/13 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
Html5踩坑记之mandMobile使用小记
2020/04/02 HTML / CSS
sort命令的作用和用法
2012/11/04 面试题
电子商务专业毕业生工作推荐信
2013/11/17 职场文书
书法培训心得体会
2014/01/05 职场文书
竞聘演讲稿范文
2014/01/12 职场文书
毕业生求职自荐书范文
2014/03/27 职场文书
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书
处理canvas绘制图片模糊问题
2022/05/11 Javascript
python+opencv实现目标跟踪过程
2022/06/21 Python