2012-03-24 62 views
1

我在C#中創建了一個Web服務,現在需要從移動應用程序調用它。我試圖創建一個Windows 7移動應用程序,但使用HTML5和Javascript而不是本機代碼。該Web服務需要2個參數,電子郵件和密碼,並返回一個數據集。我真的沒有任何JavaScript經驗(或者有關此項目的Web服務經驗,試圖學習這個項目),並且當試圖研究如何使用javascript調用Web服務時,我只是發現了太多的信息,並且不知道因爲還提到了很多其他技術,因此從哪裏開始。從Javascript調用Web服務(傳遞參數並返回數據集)

所以我決定嘗試的東西出來,這就是我想出迄今:

<script type="text/javascript"> 

     document.addEventListener("deviceready", onDeviceReady, false); 

     // once the device ready event fires, you can safely do your thing! -jm 
     function onDeviceReady() { 

     } 

     function LoginButton_onclick() { 
     UpdateChildrenApp.PhoneWebServices.GetMyChildren(document.getElementById('EmailBox').value,document.getElementById('PasswordBox').value, OnComplete, OnError) 
    } 

    function OnComplete(result) { 
     for (var i = 0; i < result.tables[0].rows.length; i++) 
      document.getElementById('Test').innerHTML += ''+(result.tables[0].rows[i].col_name); 
    } 

    function OnError(result) { 
    document.getElementById('Test').innerHTML ='Error :'+result.get_message(); 
    } 

    </script> 

這個代碼什麼也不做,當我按下提交按鈕。有人能指出什麼是問題以及我如何解決這些問題或建議我應該研究解決問題並使我走上正確的軌道?任何幫助是極大的讚賞。

+0

我的思維過程可能是完全錯誤的,但沒有你的頁面需要被Ajax化的更新從回調到UI效果? – 2012-03-24 12:02:58

+0

這是我的問題,我缺乏背景知識來知道該怎麼做,並且需要一些關於從哪裏開始的指示,所以其他人不得不確認您的建議。謝謝:) – Matt 2012-03-24 12:06:44

+0

因爲第二個評論排序和我說的一樣,我在下面添加我的答案。 – 2012-03-25 08:33:39

回答

2

首先,如果你想在javascript中使用它,你的webservices應該返回一個JSON對象。 你當然可以返回任何XML /字符串,但使用JSON將很容易使用JavaScript中的數據。

然後,我建議你使用jquery來調用web服務,因爲jquery會爲你做很多工作。

this article,它應該幫助你正確地設置不同的組件:

+0

那篇文章真的幫了我,謝謝! – Matt 2012-03-25 10:41:26

+0

當我訪問該鏈接時,我收到來自Google Chrome的惡意軟件警告(前面的網站包含惡意軟件)。請使用鏈接中的信息更新答案。 – 2017-01-17 16:38:57

2

我會用jQuery來做這種事情。 其提供的ajax功能非常易於使用。 我會使用暴露模塊模式(RMP)和2個JavaScript文件。如果你不熟悉的賊法牧,有一個偉大的職位在這裏將其覆蓋:

http://weblogs.asp.net/dwahlin/archive/2011/08/02/techniques-strategies-and-patterns-for-structuring-javascript-code-revealing-module-pattern.aspx

我發現,如果我不使用某種結構的使用RMP我的js代碼,我剛剛結束了在一個文件中有一堆功能。

標識有Startup.js和Dataservice.js,他們將是這個樣子:

Startup.js

var Startup = function() { 
    var isValid, 
     dataObject = {}, 

    populateDataObject = function() { 
     dataObject.dealer = $("[id$='_txtUser']").val(); 
     dataObject.password = $("[id$='_txtPassword']").val(); 

    }, 

    init = function() { 
     var dealerId = 0; 

     $("[id$='_SubmitButton']").bind('click', function (evt) { 
      evt.preventDefault(); 
      populateDataObject(); 


      if (isValid) { 
       Dataservice.processLoginRequest(dataObject, processLoginRequestResult); 
      } 
     }); 
    }; 

    return { 
     init: init, 
     processLoginRequestResult: processLoginRequestResult 
    }; 

}(); 

Dataservice.js(假定老同學的.asmx,根據需要更改)

var Dataservice = function() { 

    $.ajaxSetup({ 
     type: "POST", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json" 
    }); 

    var serviceBase = '../services/LoginService.asmx/', 

    processScreenRequest = function (valObject, callback) { 
     $.ajax({ 
      url: serviceBase + "ProcessLoginRequest", 
      data: JSON.stringify(valObject), 
      success: function (json) { 
       callback(json); 
      } 
     }); 
    }; 

    return { 
     processScreenRequest: processScreenRequest 
    }; 

}(); 

然後我會包括引用這些2個js文件以及我的html頁面中的jquery。 我希望這可以幫助。

+0

很好的回答,謝謝你的幫助:) – Matt 2012-03-25 10:42:12

相關問題