Jquery调用WebService代码,JS代码库,德仔网

代码语言
代码分类
【JS】 Jquery调用WebService
作者:Dezai.CN / 发布于2013/11/4/ 610
Jquery调用WebService

	<!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 id="Head1" runat="server">
	<title></title>
	
	<script src="jquery.js" type="text/javascript"></script>
	
	<style type="text/css">
	.hover
	{
	cursor: pointer; /*小手*/
	background: #ffc; /*背景*/
	}
	.button
	{
	width: 150px;
	float: left;
	text-align: center;
	margin: 10px;
	padding: 10px;
	border: 1px solid #888;
	}
	#dictionary
	{
	text-align: center;
	font-size: 18px;
	clear: both;
	border-top: 3px solid #888;
	}
	#loading
	{
	border: 1px #000 solid;
	background-color: #eee;
	padding: 20px;
	margin: 100px 0 0 200px;
	position: absolute;
	display: none;
	}
	#switcher
	{
	}
	</style>
	
	<script type="text/javascript">
	
	
	//无参数调用
	$(document).ready(function() {
	$('#btn1').click(function() {
	$.ajax({
	type: "POST", //访问WebService使用Post方式请求
	contentType: "application/json", //WebService 会返回Json类型
	url: "WebService1.asmx/HelloWorld", //调用WebService的地址和方法名称组合 ---- WsURL/方法名
	data: "{}", //这里是要传递的参数，格式为 data: "{paraName:paraValue}",下面将会看到
	dataType: 'json',
	success: function(result) { //回调函数，result，返回值
	$('#dictionary').append(result.d);
	}
	});
	});
	});
	
	
	//有参数调用
	$(document).ready(function() {
	$("#btn2").click(function() {
	$.ajax({
	type: "POST",
	contentType: "application/json",
	url: "WebService1.asmx/GetWish",
	data: "{value1:'心想事成',value2:'万事如意',value3:'牛牛牛',value4:2009}",
	dataType: 'json',
	success: function(result) {
	$('#dictionary').append(result.d);
	}
	});
	});
	});
	
	
	//返回集合（引用自网络，很说明问题）
	$(document).ready(function() {
	$("#btn3").click(function() {
	$.ajax({
	type: "POST",
	contentType: "application/json",
	url: "WebService1.asmx/GetArray",
	data: "{i:10}",
	dataType: 'json',
	success: function(result) {
	$(result.d).each(function() {
	//alert(this);
	$('#dictionary').append(this.toString() + " ");
	//alert(result.d.join(" | "));
	});
	}
	});
	});
	});
	
	
	//返回复合类型
	$(document).ready(function() {
	$('#btn4').click(function() {
	$.ajax({
	type: "POST",
	contentType: "application/json",
	url: "WebService1.asmx/GetClass",
	data: "{}",
	dataType: 'json',
	success: function(result) {
	$(result.d).each(function() {
	//alert(this);
	$('#dictionary').append(this['ID'] + " " + this['Value']);
	//alert(result.d.join(" | "));
	});
	
	}
	});
	});
	});
	
	//返回DataSet(XML)
	$(document).ready(function() {
	$('#btn5').click(function() {
	$.ajax({
	type: "POST",
	url: "WebService1.asmx/GetDataSet",
	data: "{}",
	dataType: 'xml', //返回的类型为XML ，和前面的Json，不一样了
	success: function(result) {
	//演示一下捕获
	try {
	$(result).find("Table1").each(function() {
	$('#dictionary').append($(this).find("ID").text() + " " + $(this).find("Value").text());
	});
	}
	catch (e) {
	alert(e);
	return;
	}
	},
	error: function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数
	if (status == 'error') {
	alert(status);
	}
	}
	});
	});
	});
	
	
	
	
	//Ajax 为用户提供反馈，利用ajaxStart和ajaxStop 方法，演示ajax跟踪相关事件的回调，他们两个方法可以添加给jQuery对象在Ajax前后回调
	//但对与Ajax的监控，本身是全局性的
	$(document).ready(function() {
	$('#loading').ajaxStart(function() {
	$(this).show();
	}).ajaxStop(function() {
	$(this).hide();
	});
	});
	
	// 鼠标移入移出效果，多个元素的时候，可以使用&ldquo;，&rdquo;隔开
	$(document).ready(function() {
	$('div.button').hover(function() {
	$(this).addClass('hover');
	}, function() {
	$(this).removeClass('hover');
	});
	});
	
	
	</script>
	
	</head>
	<body>
	<form id="form1" runat="server">
	<div id="switcher">
	<h2>
	jQuery 的WebServices 调用</h2>
	<div class="button" id="btn1">
	HelloWorld</div>
	<div class="button" id="btn2">
	传入参数</div>
	<div class="button" id="btn3">
	返回集合</div>
	<div class="button" id="btn4">
	返回复合类型</div>
	<div class="button" id="btn5">
	返回DataSet(XML)</div>
	</div>
	<div id="loading">
	服务器处理中，请稍后。
	</div>
	<div id="dictionary">
	</div>
	</form>
	</body>
	</html>
评论列表
本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。
试试其它关键字
　调用WebService　
同语言下
可能有用的
Dezai.CN贡献的其它代码(4037)