我在js中有一个脚本,可以将表单数据从一页发送到服务器,并且可以与Jquery函数一起很好地工作,但是我希望能够在不使用Jquery的情况下做到这一点。当我尝试不使用jQuery时,将发送表单,但是邮件到达的是空的,没有发件人,没有主题,也没有消息。提前致谢。

jQuery脚本脚本(确定)

$("#contact-form").on("submit", function(event) {
   event.preventDefault();
   $.ajax({
     type: "POST",
     url: "php/email-sender.php",
     data: {
       name: $("#contact-form #name").val(),
       email: $("#contact-form #email").val(),
       subject: $("#contact-form #subject").val(),
       message: $("#contact-form #message").val()
     },
     dataType: "json",
     success: function(data) {
    console.log(“success”);
       } else {
          console.log(“error”);
       }
     },
     error: function() {
         console.log(“error”);
     }
   });
 });

接收数据的PHP脚本
session_cache_limiter('nocache');
header('Expires: ' . gmdate('r', 0));
header('Content-type: application/json');

$Recipient = 'info@ejemplo.com'; // <-- Set your email here

if($Recipient) {

    $Name = $_POST['name'];
    $Email = $_POST['email'];
    $Subject = $_POST['subject'];
    $Message = $_POST['message'];
    if (isset($_POST['category'])) {
        $Category = $_POST['category'];
    }

    $Email_body = "";
    if (isset($_POST['category'])) {
        $Email_body .= "From: " . $Name . "\n" .
        "Email: " . $Email . "\n" .
        "Subject: " . $Subject . "\n" .
        "Message: " . $Message . "\n" .
        "Category: " . $Category . "\n";
    } else {
        $Email_body .= "From: " . $Name . "\n" .
        "Email: " . $Email . "\n" .
        "Subject: " . $Subject . "\n" .
        "Message: " . $Message . "\n" .
        "Enviado el " . date('d/m/Y', time());
    }

    $Email_headers = "";
    $Email_headers .= 'From: ' . $Name . ' <' . $Email . '>' . "\r\n".
    "Reply-To: " .  $Email . "\r\n";

    $sent = mail($Recipient, $Subject, $Email_body, $Email_headers);

    if ($sent){
        $emailResult = array ('sent'=>'yes');
    } else{
        $emailResult = array ('sent'=>'no');
    }

    echo json_encode($emailResult);

} else {

    $emailResult = array ('sent'=>'no');
    echo json_encode($emailResult);

}

关联的HTML
<form id="contact-form" role="form">
      <div class="form-group has-feedback">
        <input type="text" class="form-control" id="name" name="name"  placeholder="Nombre" required>
      </div>
      <div class="form-group has-feedback">
        <input type="email" class="form-control" id="email" name="email" placeholder="Correo electronico" required>
      </div>
      <div class="form-group has-feedback">
        <input type="text" class="form-control" id="subject" name="subject" placeholder="Asunto" required>
      </div>
      <div class="form-group has-feedback">
        <textarea class="box-msg" rows="6" id="message" name="message">     </textarea>
      </div>
      <div class="form-group has-feedback">
        <input type="submit" value="Enviar" class="submit-button btn btn-default">
      </div>
</form>

没有jQuery的Test1(不起作用)
// Submit contactForm START
const contactForm = document.getElementById("contact-form");

contactForm.addEventListener("submit", function(event) {
  event.preventDefault();
  var request = new XMLHttpRequest();
  request.open("POST", "/php/email-sender.php", true);
  request.setRequestHeader(
    "Content-Type",
    "application/x-www-form-urlencoded; charset=UTF-8"
  );

  request.onreadystatechange = function() {
    if (request.readyState == XMLHttpRequest.DONE) {
      // request end.
      if (request.status == 200) {
        // success START
        console.log(request.response);
        // success END
      } else {
        // error START
        console.log("error");
        // error END
      }
    }
  };

  var formData = new FormData();
  data.append("name", document.getElementById("name").value);
  data.append("email", document.getElementById("email").value);
  data.append("subject", document.getElementById("subject").value);
  data.append("message", document.getElementById("message").value);
  request.send(formData);
});

没有jQuery的Test2(不起作用)
var contactForm = document.getElementById("contact-form");

contactForm.addEventListener("submit", function(event) {
  event.preventDefault();
  var request = new XMLHttpRequest();
  request.open("POST", "/php/email-sender.php", true);
  request.setRequestHeader("Content-Type", "application/json;  charset=UTF-8");

  request.onreadystatechange = function() {
    if (request.readyState == XMLHttpRequest.DONE) {
      // request end.
      if (request.status == 200) {
        // success START
        console.log(request.response);
        // success END
      } else {
        // error START
        console.log("error");
        // error END
      }
    }
  };

  var data = {
    name: document.getElementById("name").value,
    email: document.getElementById("email").value,
    subject: document.getElementById("subject").value,
    message: document.getElementById("message").value
  };
  request.send(JSON.stringify(data));
});

最佳答案

您的第一个javascript将返回错误,因为未定义数据对象。

试试这个

        const contactForm = document.getElementById("contact-form");

            contactForm.addEventListener("submit", function(event) {

              event.preventDefault();

                var request = new XMLHttpRequest();
                var url = "/php/email-sender.php";
                request.open("POST", url, true);
                request.setRequestHeader("Content-Type", "application/json");
                request.onreadystatechange = function () {
                    if (request.readyState === 4 && request.status === 200) {
                        var jsonData = JSON.parse(request.response);
                        console.log(jsonData);
                    }
                };
                var name =  document.getElementById("name").value;
                var email = document.getElementById("email").value;
                var subject = document.getElementById("subject").value;
                var message = document.getElementById("message").value;


                var data = JSON.stringify({"name": name, "email": email, "subject": subject, "message": message});


                request.send(data);

            });

</script>

检查此线程以了解如何接收JSON POST:
Receive JSON POST with PHP

然后尝试这个到您的PHP文件
<?php
// Handling data in JSON format on the server-side using PHP
header("Content-Type: application/json");
// build a PHP variable from JSON sent using POST method
$v = json_decode(stripslashes(file_get_contents("php://input")))
echo json_encode($v);
?>

要访问您的PHP文件中的对象,请使用
$v->name;
$v->email;
$v->subject;
$v->message;

截屏:
javascript - 使用AJAX发送表单数据而无需JQUERY的POST方法-LMLPHP
https://s9.postimg.cc/w1fc8266n/2018-05-03_20h37_08.gif

关于javascript - 使用AJAX发送表单数据而无需JQUERY的POST方法,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50152966/

10-12 13:04
查看更多