使用ajax將數據發布到asmx網絡服務並使用javascript函數在html頁面中寫入響應時出錯

Question

我創建了一個asmx Web服務，如下所示：

    [ScriptService]
public class CurrencyData : System.Web.Services.WebService
{

    [WebMethod]
    public string DisplayCurrency(double currency, string symbol ,string format)
    {
        switch(format)
        {
            case "short": symbol = "EUR";
                break;
            case "long": symbol = "EURO";
                break;
            case "simple":
                break;
        }
        return currency.ToString() + symbol;
    }


}

在客戶端，我創建了一個外部js腳本來調用包含以下代碼的上述服務：

$(document).ready(function displaycurrency(monval, sym, fmt) {    
var output;
$.ajax({
    type: "POST",
    url: "http://localhost:60413/CurrencyData.asmx/DisplayCurrency",  
    data: "currency=" + monval + "&symbol=" + sym + "&format=" + fmt + "",           //posting the required currency & symbol        
    dataType: "text",      
    success: function (data) {
        var xmlout = $.parseXML(data);            
        output = xmlout.childNodes[0].innerHTML; //getting the currency value from xml
    }
});
return output;
});

我正在使用在html頁面中調用的已定義函數來顯示腳本標記之間的貨幣值：

<p id="#price" ><script>displaycurrency("22.56", "$", "long")</script></p>
<script type="text/javascript" src="~/Scripts/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="~/Scripts/CurrencyHLPR.js">/script>
//external js

但是，當我嘗試運行代碼時，出現“未定義displaycurrency”錯誤。 我打算在html的多個位置使用此方法來打印不同的貨幣格式。 我不太熟悉通過腳本/ ajax來使用Web服務，因此不確定其他方法。 請給出一個解決方案。

Answer 1

對於我來說，要完全了解您想要的結果和過程有點困難，因為缺少有關項目及所有方面的背景信息。 不過，這就是我的工作方式。 我的示例確實很基本，但是我想您將能夠適應您的需求。

在我的JS文件中，我首先獲得了P標簽的值，我對此配置做了一些更改（而不是在P標簽內部調用函數）。 我將字符串分成一個數組以獲取每個參數。 然后，我調用一個函數，該函數又調用ajax函數。 從Web服務返回結果后，我將結果顯示在新的P標簽中，以表明調用成功。

我稍微更改了您的WebService代碼，剝離了CurrencyData類。 不知道自己的全部意圖，您將不得不告訴我該課程是否是強制性的，我將糾正這種情況。

這是WebService.cs。 請注意，“使用System.Web.Script.Services;” 如果要在AJAX調用中使用DisplayCurrency方法，則必須使用：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Services;

/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
 //[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {

    public WebService () {

        //Uncomment the following line if using designed components 
        //InitializeComponent(); 
    }

    [WebMethod]
    public string HelloWorld() {
        return "Hello World";
    }

    [ScriptMethod]
    [WebMethod]
    public string DisplayCurrency(double currency, string symbol, string format)
    {
        switch (format)
        {
            case "short": symbol = "EUR";
                break;
            case "long": symbol = "EURO";
                break;
            case "simple":
                break;
        }
        return currency.ToString() + " " + symbol;
    }    
}

在客戶端，我將ajax代碼添加到JS文件main.js中：

//Document ready
$(document).ready(function () {
    var results;
    //Get P tag text
    var testStr = $('#price').text();
    //Split string into an array with a character delimiter
    var arrayT = testStr.split(',');
    //Call displaycurrency function. Each array index represents a function parameter
    displaycurrency(arrayT[0], arrayT[1], arrayT[2]);
});

//displaycurrency function
var output;
function displaycurrency(monval, sym, fmt) {
    $.ajax({
        type: "POST",
        url: "/WebService.asmx/DisplayCurrency",
        data: "currency=" + monval + "&symbol=" + sym + "&format=" + fmt + "",           //posting the required currency & symbol        
        dataType: "text",
        success: function (data) {
            var xmlout = $.parseXML(data);
            output = xmlout.childNodes[0].innerHTML; //getting the currency value from xml  
            //Display result in another P tag
            $(".result").text(output);        
        }
    });
}

簡單的index.html文件：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="/js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="/js/main.js"></script>
</head>
<body>
    <p id="price">22.56,$,long</p>
    <p class="result"></p>
</body>
</html>