jquery - 发送邮件而不回发

Question

感谢您花时间查看/帮助我。

我正在寻找使用 Jquery/asp.net 发送邮件而不回发的示例。

场景是这样的:

The "contact us" form is located at the bottom of a long site(one page site) if I use the regular approach the page is posting back to the server and then the user is not aware if the mail was sent or not..

我的目标是:

sending the mail and then show the user a gesture sign indicating if the mail was sent or not

有人可以指导我一个这样的例子吗(我试图找到但没有运气)

这就是我带来的:(它不起作用) 有人可以指导我如何解决吗？

我也尝试过使用 .ashx 文件而不是 WebMethod 方法，但没有成功，该方法有缺点吗？(ashx)

JS:

 $('#btn_contactForm').on('click', function (e) {
            e.preventDefault();

            var formData = $('#form_contact').serialize();

            $.ajax({
                type: "POST",
                data:formData,                   
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                url: "<%=siteUrl %>Index.aspx/SendMail",
                success: function (data) {
                    alert(data.d);
                },
                error: function (data) {
                    alert(data.respnseText);
                }
            });
        });

服务器端:(index.aspx.cs)

[WebMethod]
public Boolean SendMail()
{
    string firstName = ....;
    string lastName = ....;
    string bName = ....;
    string phone =....;
    string senderEmail = ....;
    string message = ....;

    string eBody = "<div style='direction:rtl;'><b>mail sent from: </b>" + firstName + " " + lastName + "<br />";
    eBody += "<b>bName: </b>" + bName + "<br />";
    eBody += "<b>mail: </b>" + senderEmail + "<br />";
    eBody += "<b>phone number: </b>" + phone + "<br />";
    eBody += "<div style='width:300px;'><b>message: </b>" + message + "</div></div>";

    MailMessage MyMailMessage = new MailMessage("***@gmail.com", "***@gmail.com", "message", eBody);
    MyMailMessage.IsBodyHtml = true;

    try
    {
        SmtpClient SMTPServer = new SmtpClient();
        SMTPServer.Send(MyMailMessage);
        return true;
        //Response.Redirect("Thankyou.aspx");            
    }

    catch (Exception ex)
    {
        return false;            
    }

}

Answer 1

假设您有普通的 SendEmail 方法，您只需要一个 WebMethod:

[WebMethod]
public static Boolean SendEMail()
{
    //this is my actual email helper I tested it with
    return BLL.MailHelper.sendEmail("<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="740d1b01061119151d18340711060211065a171b19" rel="noreferrer noopener nofollow">[email protected]</a>", "Hello, World", "Subject");
}

然后使用 ajax POST 到此页面:

来自您的 HTML:

<script src="js/jquery-1.9.1.js"></script>
<script>
    $(function () {
        $.ajax({
            type: "POST",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            url: "SampleMail.aspx/SendEMail",
            dataType: "json",
            success: function (data) {
                alert(data.d);
            }
        });
    });
</script>

如果电子邮件发送成功与否，我的 BLL.MailHelper.sendEmail() 方法会返回一个 bool 值，并且您将在成功回调函数的 json 中得到相同的结果，您可以用于通知用户电子邮件是否已发送。

请注意，SampleMail.aspx 是页面的名称，SendEMail 是方法名称。数据参数为空，但您可以在此处向您的方法发送额外的参数，尽管我不推荐这样做。