发送电​​子邮件，而无需刷新页面 [英] Sending e-mail without refresh the page

问题描述

我有一个接触，我们形成位于底部的页面。

我想实现 - 从网站发送电子邮件后不回那将刷新所有的页面和客户移动到页面的顶部（接触美的形式是在底部）

相反的是 - 客户将preSS发送按钮，然后一些姿态，邮件发送会出现

我知道如何与常规方法发送邮件，我所要完成的是从与jquery.ajax客户端发送吗？ - 这是针对该方案的最佳方式。

我所做的是，客户端

  $（'＃btnSubmit按钮'）。在（'点击'，功能（）{
。全名VAR = $（'＃txt_fullName）VAL（）;
。VAR fromEmail = $（'＃txt_email）VAL（）;
VAR评论= $（'＃txtArea_message）VAL（）。
。VAR fromPhone = $（'＃txt_phone）VAL（）;
VAR数据={'名'：'+名字+'，'fromEmail'：'+
       fromEmail +'，'意见'：'+评论+'，'fromPhone'：'+ fromPhone +'};如果（联系我们== 0）{
    $阿贾克斯（{
        键入：POST，
        网址：Default.aspx的/ sentMail
        数据：数据，
        的contentType：应用/ JSON的;字符集= UTF-8，
        数据类型：JSON
    }）
}否则如果（联系我们== 1）
    返回false;
 }）
 

在服务器端我有这样的：

 特林SENDER_EMAIL = txt_email.Text;
字符串sender_fullName = txt_fullName.Text;
字符串sender_phone = txt_phone.Text;
字符串sender_message = txtArea_message.Text;MAILMESSAGE MyMailMessage = MAILMESSAGE新（）;
MyMailMessage.From =新的MailAddress（[e-mail]，网站）;
MyMailMessage.To.Add（[e-mail]）;
MyMailMessage.Subject =从现场的messge
MyMailMessage.Body =消息;
MyMailMessage.IsBodyHtml = TRUE;
尝试
{
    SmtpClient SMTPSERVER =新SmtpClient（）;
    SMTPServer.Send（MyMailMessage）;
}赶上（异常前）
{}
 

它不工作 - 我不知道为什么（？我怎么能调试使用谷歌浏览器）

解决方案

http://jsfiddle.net/uptownapps / QBvZu /

在这个例子中，我的表单有 ID =联系形式这是我将如何使用jQuery访问它。

  //我们正在寻找拦截表单上的提交事件
    //点​​击该是否来自用户的提交按钮
    //或击中而表单元素上的键盘上的Enter键。
    $（文件）。在（'提交'，'#contactForm'，函数（事件）{        //我们将处理好与自己服务器的交互
        //所以我们要prevent浏览器无法执行的默认操作
        。事件preventDefault（）;        //序列化（）在从元素将创建查询字符串数据
        //就像你通常会在一个GET请求见
        //（即NAME = UptownApps＆安培; email=[e-mail]等）
        VAR FORMDATA = $（'＃联系形式）序列化（）。        $阿贾克斯（{            //发送请求到形式最初是去同一个地方
            网址：$（'＃联系形式）ATTR（行动），            //在这种情况下，我使用POST。 GET也是可接受的。
            输入：POST，            //成功后通信此回调函数的火灾
            与服务器//
            成功：功能（数据）{//数据包含服务器的响应                $（'＃联系形式'）效果基本show（400）。 //隐藏表单
                $（'＃successMessage'）了slideDown（400）。 //显示成功消息            }，            //错误回调火灾，如果有问题与服务器通信
            //或者非200的HTTP状态返回
            错误：功能（数据）{//数据包含服务器的响应                $（'＃的errorMessage'）了slideDown（400）。 //显示错误信息            }
        }）;    }）;
 

I have a page with a contact-us form located at the bottom.

What I am trying to achieve - send an email from the site without post back that'll reload all the page and move the customer to the top of the page(the contact-us form is at the bottom).

Instead of that - The customer will press the send button, and then some gesture that the mail was sent will appear.

I know how to send mail with the regular approach, what I am trying to accomplish is to send it from the client side with jquery.ajax - is it the best way for that scenario?

What I did was that, Client side:

$('#btnSubmit').on('click', function () {       
var fullName = $('#txt_fullName').val();
var fromEmail = $('#txt_email').val();
var comments = $('#txtArea_message').val();
var fromPhone = $('#txt_phone').val();
var data = "{'name': '" + name + "', 'fromEmail': '" +
       fromEmail + "', 'comments': '" + comments + "', 'fromPhone': '" + fromPhone + "'}";

if (contactus == 0) {
    $.ajax({
        type: "POST",
        url: "Default.aspx/sentMail",
        data: data,
        contentType: "application/json; charset=utf-8",
        dataType: "json"
    })
}else if (contactus == 1)
    return false;
 })

In the server side i have this:

tring sender_email = txt_email.Text;
string sender_fullName = txt_fullName.Text;
string sender_phone = txt_phone.Text;
string sender_message = txtArea_message.Text;

MailMessage MyMailMessage = new MailMessage();
MyMailMessage.From = new MailAddress("[e-mail]", "Site");
MyMailMessage.To.Add("[e-mail]");
MyMailMessage.Subject = "messge from site";
MyMailMessage.Body = "message";
MyMailMessage.IsBodyHtml = true;
try
{
    SmtpClient SMTPServer = new SmtpClient();
    SMTPServer.Send(MyMailMessage);          
}

catch (Exception ex)
{

}

It doesn't work - and I don't know why(how can I debug that using Google chrome?)

解决方案

http://jsfiddle.net/uptownapps/QBvZu/

In this example, my form has id="contactForm" which is how I will access it with jQuery.

    // We are looking to intercept the "submit" event on the form
    // whether that comes from a user clicking the "submit" button
    // or hitting "enter" on their keyboard while on a form element.
    $( document ).on('submit', '#contactForm', function( event ) {

        // We are going to handle the interaction with the server ourselves
        // so we want to prevent the browser from performing the default action
        event.preventDefault();

        // serialize() on a from element will create the query string data
        // like you would typically see in a GET request
        // (i.e. "name=UptownApps&email=[e-mail]" etc.)
        var formData = $('#contactForm').serialize();

        $.ajax({

            // Send the request to the same place the form was originally going to
            url: $('#contactForm').attr('action'),

            // In this case I'm using POST. 'GET' is also acceptable.
            type: 'POST',

            // This callback function fires after successfully communicating
            // with the server
            success: function(data) { // data contains server's response

                $('#contactForm').slideUp(400); // Hide the form
                $('#successMessage').slideDown(400); // Show the success message

            },

            // Error callback fires if there was an issue communicating with the server
            // Or a non-200 HTTP status is returned
            error: function(data) { // data contains server's response

                $('#errorMessage').slideDown(400); // Show the error message

            }
        });

    });

这篇关于发送电​​子邮件，而无需刷新页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！