Question

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

Answer 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"
});
}

它按预期工作。

Answer 2

默认情况下，WebMethod可能会返回JSON，因为jQuery的.ajax（）方法默认会对返回的数据类型进行智能猜测。

幸运的是，.ajax方法的dataType参数允许您告诉它要返回的类型：

dataType：“html”

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

dataType：“json html”

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

Answer 3

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

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()));
        }

我希望这能解决这个问题。

Answer 4

答案是一个简单的换行：

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

设置一个新元素的innerHTML，该元素未附加到页面，导致jQuery将其解码为HTML，并使用.text（）退出。

。

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

4 个答案: