使用jQuery.ajax（）提交帶有.NET Web服務的HTML表格

Question

我對jQuery和JavaScript非常陌生，但我想將電子郵件提交給我編寫的.NET Web服務。我已經用我的數據中的一些簡單值測試了Web服務，但是我希望能夠在完成一些客戶端和服務器端驗證之後提交整個表，以填充服務器端。

這工作：

data: '{ strFrom: "abcd@abc.edu", to: "abcd@abc.edu", cc: "abcd@abc.edu", subject: "test subject", body: "test body" }' 

但是，就像我說我有這個表我已經填充到表單回覆，當我做一個變種體= $（「＃divSuccessDetails」）HTML（。 ）;並通過它而不是「測試體」我得到一個無效的對象響應。我測試過，我選擇表的結果，並沿着這一行是：

<table id="ctl00_ContentPlaceHolder1_tblSuccessDetails" class="successDetails" style="width:80%;"> 
    <tbody><tr> 
     <td class="successHeading" colspan="2"> 
    Reporting Category 
    </td> 
    </tr> 
    <tr> 
     <td> 
     <span id="ctl00_ContentPlaceHolder1_lblBilling">Billing Provider: <b></b></span> 
    </td> 
     <td rowspan="1"> 
     <span id="ctl00_ContentPlaceHolder1_lblCategory">Reporting Category: </span></td> 
    </tr> 
    <tr> 

我的Web服務的方法是這樣的：

public string Email(string strFrom, string to, string cc, string subject, string body) { 
    try 
    { 
     MailMessage objMail = new MailMessage(); 
     MailAddress from = new MailAddress(strFrom); 
     objMail.From = from; 
     objMail.To.Add(to); 
     objMail.CC.Add(cc); 
     objMail.Subject = subject; 
     objMail.Body = body; 
     SmtpClient smtp = new SmtpClient("pobox.abc.edu"); 
     smtp.Send(objMail); 

     return "{\"form\": { \"successful\": \"true\" }}"; 
    } 
    catch (Exception ex) 
    { 
     return "{\"form\": { \"successful\": \"false\" }, {\"exception\": {\"ex\": \"" + ex.Message + "\" }}"; 
    } 
} 

我收到錯誤消息是沿着這些線路：

"Invalid object passed in, ':' or '}' expected. (176): { strFrom: "abcd@abc.edu", to: "abcd@abc.edu", cc: "abcd@abc.edu", subject: "IDX Provider Form by IDX Provider Form by abcd", body: " <table id="ctl00_ContentPlaceHolder1_tblSuccessDetails" class="successDetails" style="width:80%;"> <tbody><tr> <td class="successHeading" colspan="2"> 

我只是希望在把它作爲一個字符串，因爲這是我收到的..我已經把大量的HTML中，我用一個emailobject之前，但字符串這是我第一次試圖通過AJAX傳遞它。

Answer 1

如果您嘗試將完整的HTML元素的HTML表格傳遞給Web服務，您將遇到HTML字符問題（例如引號，雙引號等）。您可以轉義字符，但我認爲您最好找到想要發送到HTML表格中的特定數據值並將其分配給數據對象，因爲這會導致只發送「數據」與「標記和數據」 。如果您將整個HTML表格傳遞給服務器，則必須解析HTML文檔以提取您的值。

作爲一種替代解決方案，您可以將post the FORM轉換爲可以處理jQuery的頁面。

$.post("FormProcessor.aspx", $("#testform").serialize()); 

[更新]

如果你只是想表的HTML標記發送到服務器，您需要將HTML編碼的結果，並通過該值作爲一個字符串值服務器。

jQuery.fn.EncHTML = function() { 
     return String(this.html()) 
      .replace(/&/g, '&') 
      .replace(/"/g, '"') 
      .replace(/'/g, ''') 
      .replace(/</g, '&lt;') 
      .replace(/>/g, '&gt;'); 
    }; 

下面介紹如何在GridView中使用它。

var html = $('#<%= Sample.ClientID %>').EncHTML(); 

以下是如何對ASMX/WCF服務執行標準的jQuery AJAX請求。

$.ajax({ 
    type: 'POST', 
    url: '/TableManager.asmx/Process', 
    data: JSON.stringify({ tableContents: html }), 
    contentType: 'application/json; charset=utf-8', 
    dataType: 'json' 
}); 

這將調用TableManager.asmx服務的 「處理」 的方法。它期望一個名爲「tableContetns」的String類型的變量被傳遞。它有一個VOID的返回類型，所以沒有任何東西被髮送回客戶端/頁面，但是這可以改成字符串，這樣你就可以發回一個表格/數據被處理的消息。

注意：我也使用JSON.Org stringify函數來正確地JSON編碼我的對象被髮送到服務器。

以下是服務器上的Web方法。

[WebService(Namespace = "http://tempuri.org/")] 
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 
[ScriptService] 
public class TableManager : WebService 
{ 
    [WebMethod] 
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
    public void Process(string tableContents) 
    { 
     var table = Server.HtmlDecode(tableContents); 
     // Do Something (Email, Parse, etc...). 
    } 
} 

表拉從客戶端回將不包括在「表」標籤，所以你需要拋出那些在自己身上。