javascript - 如何通过 ajax 通过 $POST 发送对象数据(从 jQuery 到 vanilla JS)

Question

我有这个 jQuery 片段，用于通过 ajax 请求发送表单数据，并让 php 吐出更多 jQuery 以显示电子邮件已发送。我已经把大部分代码都写下来了，我不会收到回复，没有邮件，没有 js 错误，也没有 php 错误。

这是我的 html 表单:

<form id="contact-form" method="post">
  <label for="required_question" style="position:absolute; left:-10000px; bottom:auto; width:1px; height:1px; overflow:hidden;"></label>
  <label for="required_question2" style="position:absolute; left:-10000px; bottom:auto; width:1px; height:1px; overflow:hidden;"></label>
  <label for="name" style="position:absolute; left:-10000px; bottom:auto; width:1px; height:1px; overflow:hidden;">name</label>
  <label for="email" style="position:absolute; left:-10000px; bottom:auto; width:1px; height:1px; overflow:hidden;">email</label>
  <label for="subject" style="position:absolute; left:-10000px; bottom:auto; width:1px; height:1px; overflow:hidden;">email</label>
  <label for="text" style="position:absolute; left:-10000px; bottom:auto; width:1px; height:1px; overflow:hidden;">message</label>
  <label for="submit" style="position:absolute; left:-10000px; bottom:auto; width:1px; height:1px; overflow:hidden;">submit</label>

  <input tabindex="-1" name="required_question" placeholder="Required..." style="position:absolute; left:-10000px; bottom:auto; width:1px; height:1px; overflow:hidden;"></input>
  <input tabindex="-1" name="required_question2" placeholder="Required..." style="position:absolute; left:-10000px; bottom:auto; width:1px; height:1px; overflow:hidden;"></input>
  <input type="text" name="name" placeholder="Name..." required></input>
  <input type="email" name="email" placeholder="Email..." required></input>
  <input type="text" name="subject" placeholder="Subject..." required></input>
  <textarea name="text" placeholder="Enter your message here" required></textarea>
  <input type="submit" class="submit" value="Submit."></input>
</form>

这是 jquery 片段:

$('#contact-form').on('submit', function() {

  $('#submit').val('Sending...');

  var  data = {};

  $(this).find('[name]').each(function(index, value) {
    data[$(this).attr('name')] = $(this).val();
  });
  $.post('/dss-assets/PHP/mailer.php', {term: data}).done(function(data) {
    $('body').append(data);
  });
    return false;
});

这是我到目前为止在我的 vanilla js 中的内容:

document.getElementById('contact-form').addEventListener('submit', function(event){
  event.preventDefault();
  document.querySelector('input[type="submit"]').value = 'Sending...';
  document.querySelector('input[type="submit"]').blur();
  $disabled_inputs = document.querySelectorAll('input, textarea');
  for(i = 0; i < $disabled_inputs.length; i++){
    $disabled_inputs[i].disabled = true;
    $disabled_inputs[i].style.opacity = '.7';
  }

  var $data = {};

  this.querySelectorAll('input[name], textarea[name]').forEach(function($input) {
  $data[$input.getAttribute('name')] = $input.value;
  });
  console.log($data)

  inquriry_request = new XMLHttpRequest();

  inquriry_request.onload = function(){
    document.querySelector('body').append(inquriry_request.responseText)
  }

  inquriry_request.onerrror = function(){
    console.log({contactpage: $data})
  }

  inquriry_request.open('POST', '/dss-assets/PHP/mailer.php', true)
  // ---it seems my data type was wrong and thats why it wouldnt send---
  inquriry_request.setRequestHeader('Content-Type', 'multipart/form-data'); 
  inquriry_request.send({contactpage: $data});

});

这是 mailer.php:

<?php
if(isset($_REQUEST['contactpage'])) {

$array = $_REQUEST['contactpage'];
//------required questions-----------------
$rq = $array['required_question'];
$rqtwo = $array['required_question2'];

if($rq != '' || $rqtwo != ''){
  $quo = '"';
  $input = "$quo input[name*='hmnvr'] $quo";
  echo "<script>
    console.log('uhhohh')
  </script>";
  exit();
};

  //----------sendmail-------------
  $headers = "From: Desert Sun Studio | Sal <sal@desertsunstudio.com>\r\n";
  $headers .= "MIME-Version: 1.0\r\n";
  $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
  $name = $array['name'];
  $email = $array ['email'];
  $subject = $array['subject'];
  $text = $array['text'];

  $msg ='Hello ' . $name .',<br><br>
  Thank you for submitting a message through https://www.desertsunstudio.com. This is just to confirm your message has
  been received, please allow up to 24 hours to receive a response. To follow up or add any additional information
  please <a href="mailto:sal@desertsunstudio.com">click here</a> or simply reply to this email.';

  $msg2= 'Hello sally, this is your lil mail bot:)) Looks like we got a message, lets take a looksie: <br><br>From: ' . $name .
  '<br><br>Contact email: ' . $email . '<br><br> Message: &quot;' . $text . '&quot;';





  if(@mail($email, 'Response to your recent inqury at Desert Sun Studio.', $msg, $headers) && @mail('sal@desertsunstudio.com', 'Looks like we have a potential client!', $msg2, $headers)){
    $quo = '"';
    echo "<script>
      console.log('sent')
    </script>";
    exit();
  } else {

  echo "<script>
    console.log('uhhohh')
  </script>";
  exit();
  }
};

?>

Answer 1

尝试 FormData 发送整个表单

示例:

$('#contact-form').on('submit', function() {
      $('#submit').val('Sending...');
      var data = new FormData(this);
      $.ajax({
        type: 'POST',
        url: '/dss-assets/PHP/mailer.php',
        processData: false,
        contentType: false,    
        data: data,
        dataType: "json",
        success: function(res) {
           $('body').append(res)
        },
        error: function() {
            alert("fail");
        }
      });
    });