Jquery Ajax學習實例3 向WebService發出請求，調用方法返回數據

2019-11-21 00:40:17

字體：大中小

來源：轉載

供稿：網友

一、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> 