如何使用Jquery從ASP.Net WebMethod調用返回HTML？

使用Asp.Net 4.0 Web窗體和Jquery 1.6.2。我想對頁面上的WebMethod進行Ajax調用，並讓它返回html。在服務器端WebMethod看起來像這樣。如何使用Jquery從ASP.Net WebMethod調用返回HTML？

[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？

來源

2012-02-20 Jive Boogie

可能WebMethod默認返回JSON，因爲jQuery的.ajax（）方法默認會對返回的數據類型進行智能猜測。

幸運的是，阿賈克斯方法的數據類型參數允許你告訴它什麼類型的返回：

數據類型：「HTML」

在文檔中的參數的說明說，jQuery的可轉換數據類型，如果您願意，可以在響應的Content-Type標頭上返回另一個類型。

數據類型：：在這種情況下，如果響應的內容類型是JSON，您可以使用它轉換「JSON HTML」

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

來源

2012-02-20 00:16:35 maniak1982

不管什麼我具體的數據類型設置爲，它始終返回一個包含「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" 
}); 
}

它按預期工作。

來源

2012-02-21 15:16:13

由於我返回的html結果很複雜，我面臨將jQuery手機融入到ASP.Net web表單中的情況。我能夠通過從服務器端返回一個編碼的html來提供修復。編碼後的html進一步以utf8格式編碼。這個結果將被最終解碼，以便在div或任何選擇的控制中輸出。這是pseuso代碼：

ASP.NET（VB的風格，使用您選擇的任何語言）的輸出必須

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

返回從JavaScript部分使用jQuery

$('#<%=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())); 
     }

我希望這能解決這個問題。

來源

2012-06-27 15:17:25 Ammog

答案是簡單的一條線的變化：

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

設置這是不不追加到該頁面的新元素的innerHTML，導致jQuery來它解碼成HTML，向後拉出帶的.text （）。

。

來源

2015-02-20 21:00:11

如何使用Jquery從ASP.Net WebMethod調用返回HTML？

回答

相關問題