一個簡單的Webservice的demo(中)_前端頁面調用


  首先新建項目,這里有兩種調用方式,為了能方便理解,新建頁面WebserviceTest如下圖:

  

  先引用寫好的服務,這里用上次寫好的服務。見上次寫的一個簡單的Webservice的demo,簡單模擬服務

   

  這里我們要新建一個服務,調用我們引用給服務。因為一般情況下js不能跨域訪問服務的,當然,只是一般,要非得跨域訪問也行,網上搜方法,但是那樣做就沒意義了。新建服務,取名MyJsWebservice,如下圖:

  

  在服務中調用引用的服務,並將Ajax腳本調用改取消的注釋取消。如下圖:

  

  生成以下解決方案,現在我們在頁面上調用。使用jQuery,Ajax調用。

  前端代碼:  

 1 <head runat="server">
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 3     <title>WebserviceTest</title>
 4     <script src="jquery-1.7.2.min.js"></script>
 5     <script type="text/javascript">
 6         $(function () {
 7             $("#btnSure").click(function () {
 8                 var birthday = $("#birthday").val();
 9                 $.ajax({
10                     type: "Post", //Post傳參
11                     url: "/MyJsWebservice.asmx/WhoAreYou",//服務地址
12                     data: "{birthday:'"+birthday+"'}",//參數
13                     dataType: "json",
14                     contentType: "application/json;charset=utf-8",
15                     success: function (result) {
16                         // 調用成功后,將獲取的名字填入name文本框中。
17                         $("#name").val(result.d);
18                     },
19                     error: function (e) {
20                         window.alert(e.status);
21                     }
22                 })
23             })
24         })
25     </script>
26 </head>
27 <body>
28     <form id="form1" runat="server">
29     <div>
30         請輸入您的生日:
31         <input type="text" id="birthday" />
32         <input type="text" id="name" /><input type="button" id="btnSure" value="確 定" />
33     </div>
34     </form>
35 </body>

  測試成功:

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM