使用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>