Использование Ajax для отправки формы Jquery

Question

Я пытаюсь создать форму, которая использует AJax для отправки формы вместо перезагрузки страницы, но каждый код, который я пробовал, ничего не отправляет на указанный мной адрес электронной почты.

Вот мой код:

compform. php

<?php 
 if(isset($_POST['submit'])){
 $to = "support@quadflowapp.com";// this is your Email address
 $from = $_POST['mail']; // this is the sender's Email address
 $name = $_POST['name'];
 $mail = $_POST['mail'];

 $subject = "Quadflow Content Writing Service Request";

 $message = 'Hi Uriel, you have a new content writing request email from Quadflow App';
 $message .= $name;

 $headers = "From:" . $from;

 mail($to,$subject, $message,$headers);

 header("Location: " . $_SERVER['REQUEST_URI'] . "?mail=sent");
 exit();

}
?>

Jquery (Ajax):

 $('.compform').submit(function(event) {
    var formData = {
        'name'              : $('input[name=name]').val(),
        'mail'             : $('input[name=mail]').val()
    };
    $.ajax({
        type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
        url         : 'compform.php', // the url where we want to POST
        data        : formData, // our data object
        dataType    : 'json', // what type of data do we expect back from the server
                    encode          : true
    })
        .done(function(data) {
            console.log(data); 
        });
    event.preventDefault();
    $('.compform button').html('Success!');
});

Html

<form class="compform" action="compform.php" method="post">  
   <input placeholder="Name" name="name"> 
   <input placeholder="Email" name="mail">
   <input placeholder="Type of Website" name="type"> 
   <select name="selectoptions">
    <option value="choose" disabled selected>Choose a Style</option> 
    <option value="modern">Modern</option>
    <option value="serious">Serious</option>
    <option value="light">Light Tone</option> 
    <option value="creative">Creative</option>
   </select>
   <textarea placeholder="Additional Information" name="info"></textarea>
   <button type="submit" name="submit">Submit</button>
</form> 

Answer 1

Сначала вы проверяете в своем PHP скрипте, установлено ли поле «submit», но не передаете его в своем вызове ajax. Затем вы не даете ответ json в качестве ответа, потому что вы сделали переадресацию.

Кроме того, вы используете свойство encode в своем вызове ajax, , которые, похоже, не существуют . Кроме того, вы можете использовать метод complete для получения сообщений о состоянии вашего вызова ajax.

Все в одном, вы можете попробовать эти коды (если ваша функция mail будет работать в обычном режиме)

PHP

if(isset($_POST['submit'])){
  $to = "support@quadflowapp.com"; // this is your Email address
  $from = $_POST['mail']; // this is the sender's Email address
  $name = $_POST['name'];
  $mail = $_POST['mail'];
  $subject = "Quadflow Content Writing Service Request";

  $message = 'Hi Uriel, you have a new content writing request email from Quadflow App';
  $message .= $name;

  $headers = "From:" . $from;

  mail($to,$subject, $message,$headers);

  header('Content-Type: application/json');
  echo json_encode(['status' => 'success', 'message' => 'The mail sends successfully']);
  exit();
}

jQuery

$(document).ready(function() {

  $('.compform').on('submit', compformSubmit);

  function compformSubmit(event) {
    event.preventDefault();

    var target = $(event.target);
    var formData = {
      'name': target.find('input[name="name"]').val(),
      'mail': target.find('input[name="mail"]').val(),
      'submit': true
    };

    $.ajax({
        type: 'POST', // define the type of HTTP verb we want to use (POST for our form)
        url: 'compform.php', // the url where we want to POST
        data: formData, // our data object
        dataType: 'json', // what type of data do we expect back from the server
        // encode: true // this setting does not seem to exist
      })
      .done(function(data) {
        console.log(data);
        target.find('button').text('Success!');
      })
      .always(function(jqXHR, textStatus) {
        console.log(jqXHR);
        console.log(textStatus);
        target.find('button').text('Always!');
      });
  }

});

HTML

<form class="compform" action="compform.php" method="post">
  <input placeholder="Name" name="name">
  <input placeholder="Email" name="mail">
  <input placeholder="Type of Website" name="type">
  <select name="selectoptions">
    <option value="choose" disabled selected>Choose a Style</option>
    <option value="modern">Modern</option>
    <option value="serious">Serious</option>
    <option value="light">Light Tone</option>
    <option value="creative">Creative</option>
  </select>
  <textarea placeholder="Additional Information" name="info"></textarea>
  <button type="submit" name="submit">Submit</button>
</form>