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 相关文章推荐
FormValid0.5版本发布,带ajax自定义验证例子
Aug 17 Javascript
JavaScript中的对象化编程
Jan 16 Javascript
Javascript 继承机制实例
Aug 12 Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
Apr 27 Javascript
js常用系统函数用法实例分析
Jan 12 Javascript
jquery+css实现的红色线条横向二级菜单效果
Aug 22 Javascript
基于JS实现简单的样式切换效果代码
Sep 04 Javascript
JavaScript手机振动API
Jun 11 Javascript
jQuery下拉菜单的实现代码
Nov 03 Javascript
bootstrapvalidator之API学习教程
Jun 29 Javascript
vue-cli安装使用流程步骤详解
Nov 08 Javascript
JavaScript RegExp 对象用法详解
Sep 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
drupal 代码实现URL重写
2011/05/04 PHP
javascript GUID生成器实现代码
2009/10/31 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
javascript文件中引用依赖的js文件的方法
2014/03/17 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
2014/06/24 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
jQuery下拉菜单的实现代码
2016/11/03 Javascript
jquery css实现邮箱自动补全
2016/11/14 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
2016/12/05 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
2017/06/23 Javascript
javaScript字符串工具类StringUtils详解
2017/12/08 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
vue.js数据绑定操作详解
2018/04/23 Javascript
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
react高阶组件添加和删除props
2019/04/26 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
[02:51]DOTA2 2015国际邀请赛中国区预选赛第一日战报
2015/05/27 DOTA
Python字典及字典基本操作方法详解
2018/01/30 Python
分析python请求数据
2018/08/19 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
python自动化之Ansible的安装教程
2019/06/13 Python
Python用Try语句捕获异常的实例方法
2019/06/26 Python
python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法
2019/10/04 Python
wxPython实现列表增删改查功能
2019/11/19 Python
利用matplotlib实现根据实时数据动态更新图形
2019/12/13 Python
基于SpringBoot构造器注入循环依赖及解决方式
2020/04/26 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
让IE下支持Html5的placeholder属性的插件
2014/09/02 HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
2020/11/19 HTML / CSS
SneakerStudio英国:最佳运动鞋商店
2019/05/22 全球购物
2014年教师党员自我评价范文
2014/09/22 职场文书
2019学校运动会开幕词
2019/05/13 职场文书
总结Python常用的魔法方法
2021/05/25 Python
elementui的el-popover修改样式不生效的解决
2021/06/30 Javascript
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python