Jquery Ajax学习实例3 向WebService发出请求，调用方法返回数据

183 阅读 0 评论 121 点赞

我是靠谱客的博主迅速电脑，最近开发中收集的这篇文章主要介绍Jquery Ajax学习实例3 向WebService发出请求，调用方法返回数据，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、WebService.asmx
　　处理业务数据，在GetWhether方法中产生天气情况数据，供JqueryRequest.aspx调用，代码如下:

复制代码代码如下:

 
[System.Web.Script.Services.ScriptService] 
public class WebService : System.Web.Services.WebService { 
public WebService () { 
//如果使用设计的组件，请取消注释以下行 
//InitializeComponent(); 
} 
[WebMethod] 
public string GetWhether(string cityId) 
{ 
Random r = new Random(); 
int degree = r.Next(100); 
string wInfo = string.Format("Today {0}'s temperature is {1} degrees", cityId, degree); 
return wInfo; 
} 
} 

二、AjaxRequest.aspx
　　通过点击按钮来请求WebService.asmx的GetWhether(string cityId)方法，获取天气数据。代码如下：

复制代码代码如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<script type="text/javascript" language="javascript" src="js/jquery-1.3.2.js"></script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<input type="text" name="Text1" id="Text1"/><br /> 
<input type="text" name="Text2" id="Text2"/> 
<br /> 
<input type="button" id="btn1" onclick="BtnCity_Click()" 
style="width:55px; height:20px;" /> 
</div> 
<div id="dd"> 
sd 
</div> 
<div> 
<script type="text/javascript" language="javascript"> 
function BtnCity_Click() { 
var city = $("#Text1").val(); 
$.ajax({ 
url: "WebService.asmx/GetWhether", 
data: { cityId: city }, 
type: "post", 
success: function(data, status) { 
$("#dd").html("<h1>天气情况:" + data.childNodes[1].text + "</h1>"); 
} 
}); 
} 
</script> 
</div> 
</form> 
</body> 
</html> 