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 27 Javascript
鼠标放在图片上显示大图的JS代码
Mar 26 Javascript
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
Jan 24 Javascript
javascript数组去重方法终极总结
Jun 05 Javascript
详解JavaScript编程中的数组结构
Oct 24 Javascript
javascript回到顶部特效
Jul 30 Javascript
JS版微信6.0分享接口用法分析
Oct 13 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
Apr 18 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
Mar 03 Javascript
javascript对HTML字符转义与反转义
Dec 13 Javascript
vue下载二进制流图片操作
Oct 26 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/08/06 PHP
又一个PHP实现的冒泡排序算法分享
2014/08/21 PHP
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
PHP三种方式实现链式操作详解
2017/01/21 PHP
在Laravel中使用DataTables插件的方法
2018/05/29 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
IE6下focus与blur错乱的解决方案
2011/07/31 Javascript
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
JavaScript获取文本框内选中文本的方法
2015/02/20 Javascript
实例解析jQuery中proxy()函数的用法
2016/05/24 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
基于JS实现仿百度百家主页的轮播图效果
2017/03/06 Javascript
详解在Angular项目中添加插件ng-bootstrap
2017/07/04 Javascript
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
[52:20]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
在Python程序中进行文件读取和写入操作的教程
2015/04/28 Python
python操作字典类型的常用方法(推荐)
2016/05/16 Python
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
浅谈Python脚本开头及导包注释自动添加方法
2018/10/27 Python
在Python中使用Neo4j的方法
2019/03/14 Python
python调用c++返回带成员指针的类指针实例
2019/12/12 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
django inspectdb 操作已有数据库数据的使用步骤
2021/02/07 Python
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
一篇.NET面试题
2014/09/29 面试题
五年级数学教学反思
2014/02/11 职场文书
调查研究项目计划书
2014/04/29 职场文书
迎七一演讲稿
2014/09/12 职场文书
解决 redis 无法远程连接
2022/05/15 Redis