jQuery ajax Call .net 開發的WebService

2008-09-09

10332
0
ASP.NET
2008-09-19

摘要:jQuery ajax Call .net 開發的WebService

小弟最近在一些網路上程式討論區，一直提到 jQuery說很好用，就下載來玩玩看，第一個想到的就是ajax的功能

想說jQuery的範例有一半都是php，小弟完全不懂只好自已摸索

以下就是小弟研究的過程

一、首先要到jQuery官網下載

docs.jquery.com/Release:jQuery_1.2.6

二、接下來寫一個簡單的WebService(至於怎麼用.net寫WebService，這裏就不再贅述)

Function名稱就用大家常用的 HelloWord，傳入一個字串，回傳從WebService加工後的字串

 Imports System.Web.Services 
 Imports System.Web.Services.Protocols 
  
 <WebService(Namespace:="http://tempuri.org/")> _ 
 <WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _ 
 <Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _ 
 Public Class PrintStr 
      Inherits System.Web.Services.WebService 
  
     <WebMethod()> _ 
     Public Function HelloWorld() Function HelloWorld(ByVal recStr As String) As String 
  
         Return "這是從WebService傳回來的字串：" & recStr 
     End Function 
  
End Class

三、接下來新增一個html網頁

HTML 程式碼

 <html xmlns="http://www.w3.org/1999/xhtml" > 
 <head> 
     <title>Call .Net WebSevice</title> 
    <Script Language="JavaScript" src="jQuery.js"></Script> 
     <script language=javascript> 
 function showMsg(){ 
   $.ajax({ 
     dataType:'xml',//因WebService回傳的會是xml的格式 
     url: 'PrintStr.asmx/HelloWorld', //WebService的url/方法
     type:'post',//post    
     data: {recStr: $('#txt').val()},//recStr是WebService參數名稱      
     success: function(oXml) { 
     alert(oXml.xml);//檢視回傳的結果 DeBug用 
     var xmlDoc=oXml;//宣告一個物件接回xml檔案 
    alert(xmlDoc.childNodes(1).firstChild.nodeValue);  
     } 
   }) 
 } 
   </script>   
 </head> 
 <body> 
 <div> 
       
         <input id="Button1" type="button" value="Call HelloWord"  onclick="showMsg();"  /> 
         <input id="txt" type="text"  value="123" /></div> 
 </body> 
 </html>

參考網址：

http://docs.jquery.com/Ajax/jQuery.ajax#options

回首頁