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 相关文章推荐
XHTML-Strict 内允许出现的标签
Dec 11 Javascript
JS location几个方法小姐
Jul 09 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
Apr 02 Javascript
使用jQuery处理AJAX请求的基础学习教程
May 10 Javascript
深入了解JavaScript的逻辑运算符(与、或)
Dec 20 Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 Javascript
Vue用v-for给src属性赋值的方法
Mar 03 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
May 20 Javascript
vue配置nprogress实现页面顶部进度条
Sep 21 Javascript
原生js实现碰撞检测
Mar 12 Javascript
vue使用过滤器格式化日期
Jan 20 Vue.js
基于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操作MongoDB的技术总结
2013/06/02 PHP
浅析PHP中的字符串编码转换(自动识别原编码)
2013/07/02 PHP
php无限极分类递归排序实现方法
2014/11/11 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
phpmyadmin下载、安装、配置教程
2017/05/16 PHP
关于JavaScript中string 的replace
2013/04/12 Javascript
js借助ActiveXObject实现创建文件
2013/09/29 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
javascript中的throttle和debounce浅析
2014/06/06 Javascript
BootStrap文件上传样式超好看【持续更新】
2016/05/10 Javascript
D3.js实现折线图的方法详解
2016/09/21 Javascript
js省市区级联查询(插件版&amp;无插件版)
2017/03/21 Javascript
AngularJS自定义指令之复制指令实现方法
2017/05/18 Javascript
微信小程序多张图片上传功能
2017/06/07 Javascript
vuejs实现本地数据的筛选分页功能思路详解
2017/11/15 Javascript
在vue项目中,使用axios跨域处理
2018/03/07 Javascript
基于vue1和vue2获取dom元素的方法
2018/03/17 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
2018/09/05 jQuery
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
利用Python演示数型数据结构的教程
2015/04/03 Python
python3.6连接MySQL和表的创建与删除实例代码
2017/12/28 Python
Python通过属性手段实现只允许调用一次的示例讲解
2018/04/21 Python
django2.2 和 PyMySQL版本兼容问题
2020/02/17 Python
CentOS 7如何实现定时执行python脚本
2020/06/24 Python
Django创建一个后台的基本步骤记录
2020/10/02 Python
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
英国最大的百货公司:Harrods
2016/08/18 全球购物
Bravofly德国:预订廉价航班和酒店
2019/09/22 全球购物
25道Java面试题集合
2013/05/21 面试题
装修五一活动策划案
2014/01/23 职场文书
中餐厅主管的职责范文
2014/02/04 职场文书
大学生学习2014全国两会心得体会
2014/03/13 职场文书
诚信承诺书模板
2014/05/26 职场文书
档案管理员岗位职责
2015/02/12 职场文书
运动会口号霸气押韵
2015/12/24 职场文书