从html页面通过PHP和jquery/ajax发送电子邮件
我有一个非常简单的问题，但它困扰了我很长一段时间。我有一个html联系我们页面，其中我有一个简单的表单，已经分配了验证。表单代码是：从html页面通过PHP和jquery/ajax发送电子邮件,php,jquery,ajax,forms,Php,Jquery,Ajax,Forms,我有一个非常简单的问题，但它困扰了我很长一段时间。我有一个html联系我们页面，其中我有一个简单的表单，已经分配了验证。表单代码是： <div class="contact_form"> <form method="post" id="contactForm" name="contactForm" action=""> <fieldset class="contactFieldset">
<div class="contact_form">
<form method="post" id="contactForm" name="contactForm" action="">
<fieldset class="contactFieldset">
<ul>
<li>
<label for="contactName" class="leftLabel">*Name:</label>
<input type="text" name="contactName" id="contactName" class="contactInput required" value="" />
</li>
<p></p>
<li>
<label for="email" class="leftLabel">*Email:</label>
<input type="text" id="email" name="email" class="contactInput email required" value="" />
</li>
<span class="simple-success">I'll be in touch soon</span>
<li>
<label for="subject" class="leftLabel">*Subject:</label>
<input type="text" name="subject" id="subject" class="contactInput required" value="" />
</li>
<p></p>
<li>
<label for="message" class="leftLabel">*Message:</label>
<textarea rows="10" cols="40" id="message" name="message" class="contactTextarea required"></textarea>
</li>
<p></p>
<li>
<input type="submit" alt="Submit button" name="submit" class="submit" id="submit">
</li>
</ul>
</fieldset>
</form>
</div>
-
*姓名：
-
*电邮：
我很快就会联系的
-
*主题：
-
*信息：
-
$(document).ready(function() {
//if submit button is clicked
$('#submit').click(function () {
alert("test i am here");
/*get the email value*/
var email = $("input#email").val();
var name = $("input#contactName").val();
var subject = $("input#subject").val();
var message=$("input#message").val();
alert("email"+email);
/* Check if the email is good or bad */
var goodEmail = email.match(/\b(^(\S+@).+((\.com)|(\.net)|(\.edu)|(\.mil)|(\.gov)|(\.org)|(\.info)|(\.sex)|(\.biz)|(\.aero)|(\.coop)|(\.museum)|(\.name)|(\.pro)|(\.arpa)|(\.asia)|(\.cat)|(\.int)|(\.jobs)|(\.tel)|(\.travel)|(\.xxx)|(\..{2,2}))$)\b/gi);
apos=email.indexOf("@");dotpos = email.lastIndexOf(".");lastpos=email.length-1;
var badEmail = (apos<1 || dotpos-apos<2 || lastpos-dotpos<2);
/*If the email is bad ,display the error message*/
if (email=="" || !goodEmail || badEmail) {
$("email").focus();
return false;
}
var dataString = 'email='+ email + '\n Name='+ name+ '\n Subject='+ subject+ '\n message='+ message;
alert (dataString);
$.ajax({
type: "POST",
url: "mai.php",
data: dataString,
//Do not cache the page
cache: false,
success: function(html) {
$('.simple-sucess').fadeIn(100).show();
$('.contact_form').fadeOut(100).hide();
$('.simple_error').fadeOut(100).hide();
}
});
return false;
});
});
$（文档）.ready（函数（）{
//如果单击“提交”按钮
$（“#提交”）。单击（函数（）{
警惕（“测试我在这里”）；
/*获取电子邮件值*/
var email=$（“输入电子邮件”）.val（）；
变量名称=$（“输入#联系人名称”）.val（）；
var subject=$（“输入对象”）.val（）；
var message=$（“输入消息”）.val（）；
警报（“电子邮件”+电子邮件）；
/*检查电子邮件是好是坏*/
（10.com）今年（10.net）；（\.edu）教育教育（U.edu）；（10.edu）；（10.edu）学校教育（12410.edu）；（10.米利）教育（12.米利）；（10.gov）；（10.gov）除除除除除除除除除除除除除除除除除除除除除政府政府之外之外，（10.gov）除除除除除除除除除除除除除除除除除除除除除除政府政府）之外之外之外之外之外之外之外，，，（除除除除除除除除除除除除除除除除除除除除除除除政府政府政府政府）））除除除除除除除除除除除除除除除除除除除除除除除除除除除除除除除除除除除除除除除除除除除除除除除除除除除除除除除除除除除之外之外之外之外之外之外之外之外之外之外之外|（\.xxx）|（\..{2,2}））$）\b/gi）；
apos=email.indexOf（“@”）；dotpos=email.lastIndexOf（“.”）；lastpos=email.length-1；
var badEmail=（apos首先，使用事件，而不是submit button事件，因为submit按钮已经连接到进行正常提交。也可能存在错误，请确保检查javascript控制台是否有错误。无论哪种方式
您可能真正想做的是使用，这将使您的代码更加简单
那么您修改后的代码将非常简单：
$('#contactForm').ajaxForm(function() {
$('.simple-sucess').fadeIn(100).show();
$('.contact_form').fadeOut(100).hide();
$('.simple_error').fadeOut(100).hide()
});
在这种情况下，您将失去电子邮件验证，但为什么要重新发明轮子，有很多验证程序已经解决了错误等。首先，使用事件，而不是submit button事件，因为submit按钮已经连接到进行正常提交。也可能存在错误，请确保检查您的javascript控制台的错误。无论哪种方式
您可能真正想做的是使用，这将使您的代码更加简单
那么您修改后的代码将非常简单：
$('#contactForm').ajaxForm(function() {
$('.simple-sucess').fadeIn(100).show();
$('.contact_form').fadeOut(100).hide();
$('.simple_error').fadeOut(100).hide()
});
在这种情况下，您可能会丢失电子邮件验证，但为什么要重新发明轮子呢？有很多验证程序已经解决了错误等。第一件事是您正在使用：
<input type="submit" alt="Submit button" name="submit" class="submit" id="submit">
然后它将与事件完美配合。单击（）
事件
或者，如果不想更改输入类型，可以使用第二个选项，然后使用.submit（）
而不是。单击（）
首先要使用的是：
<input type="submit" alt="Submit button" name="submit" class="submit" id="submit">
然后它将与事件完美配合。单击（）
事件
或者，如果您不想更改输入类型，可以使用.submit（）
而不是。单击（）
OMG，有这么多的代码行。一点建议：保持足够简单的调试。建议使用JSFIDLE演示来获得更好的答案
这里我发布了我的ajax表单解决方案，它可以在基本浏览器中工作，而不支持javascript
html:
OMG，这么多代码行。一点建议：保持足够简单以进行调试。建议使用JSFIDLE演示来获得更好的答案
这里我发布了我的ajax表单解决方案，它可以在基本浏览器中工作，而不支持javascript
html:
谢谢，但是我不需要在提交事件中进行php调用吗？我使用的验证是外部的，即使用jquery验证插件。我将更新代码以显示我使用的验证代码using@MFrank2012在这种情况下，jQueryForms插件将实际处理所有ajax内容你用正则表达式检查它是否有效。也许可以在你的验证插件中处理电子邮件验证。在这里阅读jquery表单插件，它将封装你的所有ajax代码并构建你的帖子数据。你构建数据字符串的方式可能会遇到问题，例如，如果我在名称字段中添加一个=
。谢谢，但我不会这样做是否在提交事件中调用php？我使用的验证是外部的，即使用jquery验证插件。我将更新代码以显示我使用的验证代码using@MFrank2012在这种情况下，jquery表单插件实际上将处理所有ajax内容检查它是否有效。可能在验证插件中处理电子邮件验证。在这里阅读jquery表单插件，它将封装您的所有ajax代码并构建您的帖子数据。构建数据字符串的方式可能会遇到问题，例如，如果我在名称字段中输入一个=
。
<form method="post" id="contactForm" action="somewhere">
Name: <input type="text" name="contactName" />
<br />
<input type="submit" value="Submit this form" />
</form>
jQuery(function($){
$('#contactForm').submit(function(e){
e.preventDefault?e.preventDefault():false;
$.post(this.action,$(this).serialize(),function(text){
//callbacks
console.log(text);
});
return false;
})
});