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>