如何使用 Jquery 从 ASP.Net WebMethod 调用返回 HTML？答案

【问题标题】：How to return HTML from ASP.Net WebMethod call using Jquery?如何使用 Jquery 从 ASP.Net WebMethod 调用返回 HTML？
【发布时间】：2012-02-20 00:09:18
【问题描述】：

使用 Asp.Net 4.0 Web 表单和 Jquery 1.6.2。我想对页面上的 WebMethod 进行 Ajax 调用并让它返回 html。在服务器端，WebMethod 看起来像这样。

[WebMethod]
public static string GetOrders()
{
    return theMethodThatGeneratesHtml();
}

这里是调用 Ajax 函数。

function GetOrders()
{
    $.ajax({
        type: 'POST',
        contentType: "application/json",
        url: "Orders.aspx/GetOrders",
        data: "{}",
        success: function (data) {
            $('#content').html(data);
        },
        dataType: "text"
    });
}

从 WebMethod 返回的数据总是被包装成一个像这样开始的 json 对象。

{"d":"\u003ctable\u003e\r\n ........

如何让 WebMethod 只返回 HTML？

【问题讨论】：

标签： jquery asp.net webmethod

【解决方案1】：

无论我将 dataType 设置为什么，它总是返回一个用“d”包裹的 Json 对象（Here 解释了为什么返回的数据总是包裹在广告中）但是 Json 对象“d " 刚刚结束了我正在寻找的Unicode Escaped html，所以我所要做的就是将 Jquery Ajax 调用更改为此

function GetOrders()
{
$.ajax({
    type: 'POST',
    contentType: "application/json",
    url: "Orders.aspx/GetOrders",
    data: "{}",
    success: function (data) {
        $('#content').html(data.d);
    },
    dataType: "json"
});
}

它按预期工作。

【讨论】：

【解决方案2】：

WebMethod 很可能默认返回 JSON，因为 jQuery 的 .ajax() 方法将默认对返回的数据类型进行智能猜测。

幸运的是 .ajax 方法的 dataType 参数允许你告诉它返回什么类型：

数据类型：“html”

文档中有关参数的注释说，如果您愿意，jQuery 可以将响应的 Content-Type 标头上返回的数据类型转换为另一种类型。在这种情况下，如果响应的 Content-Type 是 JSON，您可以使用以下方法进行转换：

数据类型：“json html”

http://api.jquery.com/jQuery.ajax/

【讨论】：

【解决方案3】：

由于我返回的复杂 html 结果，我在将 jquery mobile 合并到 ASP.Net Web 表单中时遇到了同样的情况。我能够通过从服务器端返回一个编码的 html 来提供修复。编码后的 html 进一步以 utf8 格式编码。该结果最终将被解码以在 div 或任何选择的控件中输出。这是伪代码：

ASP.NET（vb 风格，使用您选择的任何语言）输出必须与

一起返回

dim Result as string=Server.HTMLEncode(htmlouput)
return Result

来自带有 jquery 的 javascript 部分

$('#<%=btn.ClientID %>').click(function() {///begin
                $.ajax({
                    type: "POST",
                    url: "page.aspx/staticmethod",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "html",
                    success: function(html) {
                        try {
                            var out = encode_utf8(html); 
                            $('#result').html(htmlDecode(encode_utf8(html)));
                        } catch (ex) {
                            alert(ex);
                        }
                    },
                    error: function(msg) {
                       //alert error
                    }
                })
                return false;
            }); //ends

            //decode html
            function htmlDecode(value) {
                if (value) {
                    return $('<div />').html(value).text();
                } else {
                    return '';
                }
            }
           //remove the 'd' encapsulator and other unwanted characters
        function removedencapsulator(value) {
            return value.replace('{"d":"', '').replace('"}', '').replace(/(?:\s+)?         <(?:\s+)?/g, '<').replace(/(?:\s+)?>(?:\s+)?/g, '>').replace(/\s+/g, ' ');
        }
        ////replace the quote string in the return query
        function replacequote(value) {
            return value.replace('\u0027', '');
        }
        //unescape the utf-8 code
        function encode_utf8(s) {
            var normalizedData = replacequote( removedencapsulator(s));  
            return unescape(encodeURIComponent(normalizedData.toString()));
        }

我希望这能解决问题。

【讨论】：

【解决方案4】：

答案是简单的一行更改：

  success: function (data) 
  {
    var decoded = $('<div/>').html(data.d).text(); //here you go
    $('#content').html(decoded);
  }

设置未附加到页面的新元素的 innerHTML，导致 jQuery 将其解码为 HTML，并使用 .text() 拉回。

。

【讨论】：