如何将返回的XML转换为HTML？

Question

I created a simple web service in ASP.net that does some operations: 我在ASP.net中创建了一个简单的Web服务，该服务执行一些操作：

[WebMethod]
public int Area(int l, int b)
    {
return l * b;
    }

[WebMethod]
public int Perimeter(int l, int b)
{
return 2 * (l +b);
}

and i called it in HTML file, like: 我在HTML文件中称它为：

<html>
<head>
<title>WebService Call using HTTP POST</title>
<body>
<form action="http://localhost:56472/WebSite2/Service.asmx/Area" method="POST">
<input name="l">
<input name="b">
<input type="submit" value="Click for Area">
</form>
<form action="http://localhost:56472/WebSite2/Service.asmx/Perimeter" method="POST">
<input name="l">
<input name="b">
<input type="submit" value="Click for Perimeter">
</form>
</body>
</head>
</html>

put this when i click for the result it will be returned as XML: 当我点击搜索结果时，将其作为XML返回：

 <?xml version="1.0" encoding="UTF-8"?>
 <int xmlns="http://tempuri.org/">30</int>

And what I want is i want the result in HTML not XML, how to do this? 我要的是我想要HTML中的结果而不是XML，该怎么做？

Can someone help, please? 有人可以帮忙吗？

Thank You :)! 谢谢：）！

Answer 1

You'll need to call the service via ajax call and use the response to populate the required tag in the HTML. 您需要通过ajax调用来调用该服务，并使用响应在HTML中填充所需的标记。 Check the code below, it's simple jQuery AJAX call, 检查下面的代码，它是简单的jQuery AJAX调用，

$.ajax({
    url: "http://localhost:56472/WebSite2/Service.asmx/Area",
    method:"post",
    data: {
        l: "custom value",
        b: "custom value",
    }
    success: function (data) {
        console.log(data.length);
        var xmlDoc = $.parseXML(data);
        var jXml = $(xmlDoc);
        var value = jXml.find("int").text();
        $("#result").text(value);
    },
    failure: function (err) {
        console.log("could not call the service : " + err);
    }
});

Couple of things to keep in mind 要记住的几件事

Form submission will take you to next page and destroy Javascript context, that's why we need AJAX call which will just bring us the result from teh service without navigating away from the page. 表单提交将带您进入下一页并破坏Javascript上下文，这就是我们需要AJAX调用的原因，该调用只会将服务的结果带给我们，而无需离开页面。
As server is returning data in XML you'll have to parse it either as XML document or as plain string to get the required values. 当服务器以XML返回数据时，您必须将其解析为XML文档或纯字符串以获取所需的值。

***Edited to add ***编辑添加

Check out the complete example below. 查看下面的完整示例。

<html>
    <head>
        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script>
            <!-- create the function to call on click of a button -->
            function getData() {
                $.ajax({
                    url: "http://localhost:56472/WebSite2/Service.asmx/Area",
                    type: 'GET',
                    dataType: "xml",
                    data: {
                        l: "custom value",
                        b: "custom value"
                    },
                    success: function(data) {
                        console.log("success " + data);
                        console.log(data.getElementsByTagName("int"));
                        var xmlDoc = data;
                        if(typeof(data) === "string") {
                            xmlDoc = $.parseXML(data);
                        }
                        var value = xmlDoc.getElementsByTagName("int")[0].textContent;

                        $("#result").text(value);
                   },
                   error: function(err) {
                      console.log("error " + JSON.stringify(arguments));
                   }
                });
            }
        </script>
    </head>
<body>
    <!-- see the onclick attribute, you have to call your Javascript function in it's value -->
    <button onclick="getData();">click to get data</button>
    <!-- tag where it result will be displayed -->
    <h1 id="result">No result yet</h1>
</body>
</html>

如何将返回的XML转换为HTML？

问题描述

1 个解决方案

解决方案1
0 2015-11-19 02:02:01

如何将返回的XML转换为HTML？

问题描述

1 个解决方案

解决方案1 0 2015-11-19 02:02:01

解决方案1
0 2015-11-19 02:02:01