使用jQuery fancybox插件打造一个实用的数据传输模(2)

$(document).ready(function() {
$(".modalbox").fancybox();
$("#contact").submit(function() { return false; });//禁用默认的窗体提交

代码的第二行禁用默认的联系人表单提交动作。为什么呢？因此这样我们可以处理自己的单击事件，并通过 Ajax 传递数据。在用户提交表单后，我们需要得到 （电子邮件和消息） 两个字段的当前值。我们还想要检查电子邮件地址是否有效和消息长度是否超过规定的长度值

复制代码 代码如下:

$("#send").on("click", function(){
var emailval = $("#email").val();
var msgval = $("#msg").val();
var msglen = msgval.length;
var mailvalid = validateEmail(emailval);

if(mailvalid == false) {
$("#email").addClass("error");
}
else if(mailvalid == true){
$("#email").removeClass("error");
}

if(msglen < 4) {
$("#msg").addClass("error");
}
else if(msglen >= 4){
$("#msg").removeClass("error");
}

上面jquery代码使用一些逻辑语句。直到电子邮件有效和消息的长度超过 4 个字母，才会提交表单。

发送Ajax 请求

通过上面的onclick事件，需要将表单数据发送到 PHP。，我们将在我们的收件箱中收到电子邮件。

复制代码 代码如下:

// 如果两个字段验证通过接下来发送消息

//点击发送按钮之后 ，按钮被替换成“发送中”这样的文字提示，目的是为了防止用户在点击提交，提示也更人性化

$("#send").replaceWith("<em>发送中...</em>");
$.ajax({
type: 'POST',
url: 'sendmessage.php',
data: $("#contact").serialize(),
success: function(data) {
if(data == "true") {
$("#contact").fadeOut("fast", function(){
$(this).before("<p><strong>提交成功! 您的留言已经发送, 谢谢 :)</strong></p>");

setTimeout("$.fancybox.close()", 1000);
});
}
}
});
}
});

这里使用serialize(),方法来序列化提交的ajax数据，使得生成标准的URL编码
服务器响应成功之后，隐藏弹出的窗体，并显示一条成功消息。我使用 setTimeout() 方法来关闭 fancybox ，这里我设置一秒钟后隐藏窗体。要执行此操作的 JS 代码是 $.fancybox.close()。

使用 PHP发送邮件

sendmessage.php 接受用户输入的变量。然后调用mail尝试发送它，发送成功返回"true"否则返回false

复制代码 代码如下:

$sendto = "2495371937@qq.com";//定义邮件的接收者
$usermail = $_POST['email'];//获取电子邮件
$content = nl2br($_POST['msg']);//获取消息

$subject = "你有新的消息";
$headers = "来自: " . strip_tags($usermail) . "\r\n";
$headers .= "Reply-To: ". strip_tags($usermail) . "\r\n";
$headers .= "MIME-Version: 1.0\r\aan";
$headers .= "Content-Type: text/html;charset=utf-8 \r\n";

$msg = "";
$msg .= "<h2>你有新的消息</h2>\r\n";
$msg .= "<strong>来自:</strong> ".$usermail."\r\n";
$msg .= "<strong>内容:</strong> ".$content."\r\n";
$msg .= "";
if(@mail($sendto, $subject, $msg, $headers)) {
echo "true";
} else {
echo "false";
}

演示

您可能感兴趣的文章: