如何在不重定向的情況下使用 PHP 和 AJAX 在 HTML 中返回 JSON？

Question

我已經搜索了很多解決這個問題的方法，但我還沒有找到一個解決方案。 我正在嘗試在我的網站上包含一個用於發送電子郵件的表單（一個聯系我們表單）（使用 Bootstrap）。 PHP 被用於郵件模型。

問題在於發送消息時應該向用戶顯示的消息，消息沒有出現在分配給它的位置（#status），而是我被定向到一個包含數組數據的新頁面。 https://drive.google.com/file/d/1tH8cVCWpx7pDe2OyxkGSKY6rnqV9KxlL/view?usp=sharing

請注意，該消息出現在所有驗證案例中（當姓名或電子郵件或主題或消息字段為空時），只有在發送電子郵件時，它才會將我定向到另一個頁面！ https://drive.google.com/file/d/1lK11R2a18S2arExDegcZyOnITwRlIOYh/view?usp=sharing

這是我的代碼：

 < script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" > < /script> < script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" > < /script> < script > function validateForm() { document.getElementById('status').innerHTML = "Sending..."; formData = { 'name': $('input[name=name]').val(), 'email': $('input[name=email]').val(), 'subject': $('input[name=subject]').val(), 'message': $('textarea[name=message]').val() }; $.ajax({ url: "mail.php", type: "POST", data: formData, dataType: "json", success: function(data, textStatus, jqXHR) { $('#status').text(data.message1); if (data.code) //If mail was sent successfully, reset the form. $('#contact-form').closest('form').find("input[type=text], textarea").val(""); }, error: function(jqXHR, textStatus, errorThrown) { $('#status').text(jqXHR); } }); } < /script>

 <div class="col-lg-8"> <form id="contact-form" name="contact-form" action="mail.php" method="POST"> <div class="row "> <div class="form-group col-md-6"> <input class="form-control" placeholder="Name" id="name" name="name" required="required"> </div> <div class="form-group col-md-6"> <input type="email" class="form-control" placeholder="Email" id="email" name="email" required="required"> </div> <div class="form-group col-md-12"> <input type="text" class="form-control" placeholder="Subject" id="subject" name="subject" required="required"> </div> <div class="form-group col-md-12"> <textarea type="text" class="form-control" rows="6" placeholder="Message" id="message" name="message" required="required"></textarea> </div> </div> <div class="d-flex justify-content-end"> <button type="submit" class="btn btn-lg btn-primary ml-auto" onclick="validateForm();">Send Message</button> </div> <div class="status" id="status"></div> </form> </div>

 <?php $name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; $subject = $_POST['subject']; header('Content-Type: application/json'); $data = array(); if ($name === ''){ $data['message1'] = 'Name cannot be empty.'; $data['code'] = 0; print json_encode($data); exit(); } if ($email === ''){ $data['message1'] = 'Email cannot be empty.'; $data['code'] = 0; print json_encode($data); exit(); } else { if (!filter_var($email, FILTER_VALIDATE_EMAIL)){ $data['message1'] = 'Email format invalid.'; $data['code'] = 0; print json_encode($data); exit(); } } if ($subject === ''){ $data['message1'] = 'Subject cannot be empty.'; $data['code'] = 0; print json_encode($data); exit(); } if ($message === ''){ $data['message1'] = 'Message cannot be empty.'; $data['code'] = 0; print json_encode($data); exit(); } $content="From: $name \\nEmail: $email \\nMessage: $message"; $recipient = "******@gmail.com"; $mailheader = "From: $email \\r\\n"; mail($recipient, $subject, $content, $mailheader) or die("Error!"); $data['message1'] = 'Email successfully sent!'; $data['code'] = 1; print json_encode($data); exit(); ?>

Answer 1

您遇到的問題是， form提交時的默認行為是您通常在瀏覽器與 HTTP 協議交互時看到的行為。 您的button是submit type ，它提交form 。

假設您在validateForm處理了您想要的所有邏輯，您的代碼缺少的是您的意圖是防止submit的默認行為：

$("#contact-form").submit(function(e) {
    e.preventDefault();
});