javascript - 如何通过ajax和php通过邮件发送两个单独的联系表格的数据?
问题描述
我正在做一个项目。我正在使用 HTML5 和其他 UI 库。这是一个单页布局的网站。我有两个联系表格。第一个是赞助申请表,另一个是一般联系/查询表。我需要独立处理这两种表格(赞助表格和联系我们表格)。所以我使用 Ajax 和 PHP 将邮件发送到我的企业电子邮件。
当我只有一个联系表格时……我在实时服务器上测试了该应用程序。一切正常。现在,我添加了一个新表格,问题开始出现......
我正在使用两个 js(sponsorship.js 和 contact_me.js)脚本和两个 PHP(Sponsorship.php 和 contact_me.php)脚本来发送邮件,但问题是当我从一个脚本发送数据时,我得到了响应一位联系人。但是当我尝试从两种表单提交数据时,我在开发者控制台中收到以下错误。
无法加载赞助.php,跨源请求仅支持协议方案:HTTP、数据、chrome、chrome-extension、https。
failed to load contact_me.php , Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
下面是我的代码
赞助html代码
<form name="sentMessage" id="contactForm" novalidate>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="Your Full Name" style="height:60px;" id="name" required data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Your Valid Email" style="height:60px;" id="email" required data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input type="tel" class="form-control" placeholder="Your Valid Phone Number " style="height:60px;" id="phone" required data-validation-required-message="Please enter your phone number.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="Your Job Title" style="height:60px;" id="jobTitle" required data-validation-required-message="Please enter your Job Title.">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Your Company" style="height:60px;" id="company" required data-validation-required-message="Please enter your Company.">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<select name="countries"
class="form-control" style="height:60px;" id="coutries" required>
<option value="-1">Select Country</option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
</select>
<p class="help-block text-danger"></p>
</div>
</div>
<div class="clearfix"></div>
<div class="col-lg-12 text-center">
<div id="success"></div>
<br>
<button type="submit" id="Sponsorreq"
class="btn btn-primary" style="height: 50px; width:300px;">Send Message</button>
</div>
</div>
</form>
赞助.js
$(document).ready(function() {
$("#Sponsorreq").click(function() {
$("input,select").jqBootstrapValidation({
preventSubmit: true,
submitError: function($form, event, errors) {
// additional error messages or events
},
submitSuccess: function($form, event) {
event.preventDefault(); // prevent default submit behaviour
// get values from FORM
var name = $("input#name").val();
var email = $("input#email").val();
var phone = $("input#phone").val();
var jobTitle = $("input#jobTitle").val();
var company = $("input#company").val();
var country = $("select#country").val();
var firstName = name; // For Success/Failure Message
// Check for white space in name for Success/Fail message
if (firstName.indexOf(" ") >= 0) {
firstName = name
.split(" ")
.slice(0, -1)
.join(" ");
}
$.ajax({
url: "././mail/Sponsor.php",
type: "POST",
dataType: "jsonp",
data: {
name: name,
phone: phone,
email: email,
jobtitle: jobTitle,
company: company,
country: country
},
cache: false,
success: function() {
// Success message
$("#success").html("<div class='alert alert-success'>");
$("#success > .alert-success")
.html(
"<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×"
)
.append("</button>");
$("#success > .alert-success").append(
"<strong> Thankyou...Your Sponsor request has been sent.We will contact you shortly </strong>"
);
$("#success > .alert-success").append("</div>");
//clear all fields
$("#contactForm").trigger("reset");
},
error: function() {
// Fail message
$("#success").html("<div class='alert alert-danger'>");
$("#success > .alert-danger")
.html(
"<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×"
)
.append("</button>");
$("#success > .alert-danger").append(
"<strong>Sorry " +
firstName +
", it seems that our mail server is not responding. Please try again later!"
);
$("#success > .alert-danger").append("</div>");
//clear all fields
$("#contactForm").trigger("reset");
}
});
},
filter: function() {
return $(this).is(":visible");
}
});
$('a[data-toggle="tab"]').click(function(e) {
e.preventDefault();
$(this).tab("show");
});
});
/*When clicking on Full hide fail/success boxes */
$("#name").focus(function() {
$("#success").html("");
});
});
赞助.php
<?php
// Check for empty fields
if(empty($_POST['name']) ||
empty($_POST['email']) ||
empty($_POST['phone']) ||
empty($_POST['jobTitle']) ||
empty($_POST['company']) ||
empty($_POST['country']) ||
!filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))
{
echo "No arguments Provided!";
return false;
}
$name = $_POST['name'];
$email_address = $_POST['email'];
$phone = $_POST['phone'];
$jobTitle = $_POST['jobTitle'];
$company = $_POST['company'];
$country = $_POST['country'];
// Create the email and send the message
$to = 'info@bangkokblockchainconference.com'; // Add your
email address inbetween the '' replacing
yourname@yourdomain.com - This is where the form will send a message to.
$email_subject = "Website Sponsor Form: $name";
$email_body = "You have received a new message from your website
Sponsor form.\n\n"."Here are the details:\n\nName:
$name\n\nEmail: $email_address\n\nPhone: $phone\n\nJob
Title:\n$jobTitle\n\nCompany:\n$company\n\nCountry:\n$country";
$headers = "From: noreply@bangkokblockchainconference.com\n"; //
This is the email address the generated message will be from.
We recommend using something like noreply@yourdomain.com.
$headers .= "Reply-To: $email_address";
mail($to,$email_subject,$email_body,$headers);
return true;
?>
contact.js 和contact.php 遵循相同的逻辑。
代码不起作用...
邮件打不开了...
解决方案
推荐阅读
- java - Jenkins插件安装问题
- python-3.x - BeautifulSoup 没有找到任何 XML 标签
- c - STM32通过UART发送值到串口
- c# - StackExchange.Redis:没有可用于服务此操作的连接。HOST:PORT/Interactive 上的 UnableToConnect
- function - 让绑定到一个函数
- php - PHP Spintax:如何使用 REGEX 排除 CSS 代码
- reactjs - 前端开发人员步骤
- browser - Index DB,哪个浏览器有多少内存容量?
- python - 为什么我在 python 列表中出现演示错误?
- python-3.x - 在 Python 中为某个日期生成 UNIX 时间