如何通過郵件通過ajax和php發送兩個單獨的聯系表的數據？

Question

我正在做一個項目。 我正在使用HTML5和其他UI庫。 這是一頁版式的網站。 我有兩種聯系方式。 第一個是贊助請求表，另一個是一般聯系/查詢表。 我需要獨立處理這兩種表格（“贊助”表格和“與我們聯系”表格）。 因此，我正在使用Ajax和PHP將郵件發送到我的公司電子郵件中。

當我只有一個聯系表單時...我在實時服務器上測試了該應用程序。 一切都很好。 現在，我添加了一個新表格，問題開始增多...

我在郵件中使用兩個js（sponsorship.js和contact_me.js）腳本和兩個PHP（Sponsorship.php和contact_me.php）腳本，但事實是，當我從中發送數據時，我從一個腳本中獲得了響應。一位聯系人。 但是，當我嘗試從這兩種形式提交數據時，在開發人員控制台中會出現以下錯誤。

無法加載Sponsorship.php，僅協議方案支持跨源請求：HTTP，數據，chrome，chrome擴展名，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>

sponsorship.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'>&times;"
          )
          .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'>&times;"
          )
          .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("");
     });
       });

sponsorship.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遵循相同的邏輯。

代碼不起作用...

郵寄不起作用...

Answer 1

首先，您必須更改表單ID。 您不能在同一頁面中多次使用相同的ID。 然后解決您的問題。 您必須將Ajax請求中的url更新為當前域。 當前值././錯誤。 相反，您可以使用./mail/進行更改。 更新網址后，我開始使用它。