使用带有.NET Web服务的jQuery.ajax()提交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" }'

但是,就像我说我有这个表我已经填充了对表单的响应,当我做一个var 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>

我的网络服务方法是这样的:

 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放在我用过电子邮件对象的字符串中,但这是我第一次尝试通过它通过AJAX.

Answer 1

如果您尝试将完整HTML表格的HTML表格传递给Web服务,则会遇到HTML字符问题(例如引号,双引号等).您可以转义字符,但我认为您最好找到要在HTML表格中发送的特定数据值并将它们分配给数据对象,因为这样只会发送"数据"与"标记和数据" .如果将整个HTML表传递给服务器,则必须解析HTML文档以提取值.

作为替代解决方案,您可以将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服务的"Process"方法.它期望传递一个名为String的类型为"tableContetns"的变量.它的返回类型为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...).
    }
}

从客户端撤回的表格不包含"表格"标签,因此您需要将这些标签丢弃.