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 获取URL参数的插件
Mar 04 Javascript
使用ExtJS技术实现的拖动树结点
Aug 05 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 Javascript
jQuery中:image选择器用法实例
Jan 03 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
May 13 Javascript
javaScript中的原型解析【推荐】
May 05 Javascript
JS绘制微信小程序画布时钟
Dec 24 Javascript
Jqprint实现页面打印
Jan 06 Javascript
Bootstrap3下拉菜单的实现
Feb 22 Javascript
浅析vue component 组件使用
Mar 06 Javascript
JS一次前端面试经历记录
Mar 19 Javascript
js实现贪吃蛇游戏 canvas绘制地图
Sep 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
PHP计算2点经纬度之间的距离代码
2013/08/12 PHP
PHP数据库链接类(PDO+Access)实例分享
2013/12/05 PHP
PHP实现微信申请退款功能
2018/10/01 PHP
Laravel修改验证提示信息为中文的示例
2019/10/23 PHP
javascript 动态设置已知select的option的value值的代码
2009/12/16 Javascript
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
jQuery操作checkbox选择(list/table)
2013/04/07 Javascript
jtable列中自定义button示例代码
2013/11/21 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
2016/05/04 Javascript
javascript计算对象长度的方法
2017/10/25 Javascript
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
vue文件运行的方法教学
2019/02/12 Javascript
性能优化篇之Webpack构建速度优化的建议
2019/04/03 Javascript
VUE 组件转换为微信小程序组件的方法
2019/11/06 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
2020/08/31 Javascript
高性能web服务器框架Tornado简单实现restful接口及开发实例
2014/07/16 Python
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
django创建自定义模板处理器的实例详解
2017/08/14 Python
Go/Python/Erlang编程语言对比分析及示例代码
2018/04/23 Python
详解python3中tkinter知识点
2018/06/21 Python
Django 创建新App及其常用命令的实现方法
2019/08/04 Python
python几种常用功能实现代码实例
2019/12/25 Python
Selenium之模拟登录铁路12306的示例代码
2020/07/31 Python
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
英文简历自荐信范文
2013/12/11 职场文书
企业办公室主任岗位职责
2014/02/19 职场文书
2014年新生军训方案
2014/05/01 职场文书
教师工作态度自我评价
2015/03/05 职场文书
python实现剪贴板的操作
2021/07/01 Python
C3 线性化算法与 MRO之Python中的多继承
2021/10/05 Python