如何使用 jquery ajax 发出通知

Question

我想问一下我使用 PHP、AJAX 创建并包括 PHP 发送邮件功能的公司简介应用程序的通知部分。不知何故它不起作用，我不知道出了什么问题。这是我的代码：

          <div class="full black">

        <div class="large-12 columns">

          <h2 class="white">We are ready.</h2>

          <div class='form'>

            <form id='contact_form'action="send.php" method='POST'>

              <div class="large-4 columns">

                <input class='required' name='name' placeholder='NAME' type='text'>

              </div>

              <div class="large-4 columns">

                <input class='required email' name='email' placeholder='EMAIL' type='text'>

              </div>

              <div class="large-4 columns">

                <input class='required' name='subject' placeholder='SUBJECT' type='text'>

              </div>

              <div class="large-12 columns">

                <textarea class='required' name='message' placeholder='MESSAGE'></textarea>

                <input id="submit" class='button white boxed contact-button' type='submit' value="Send it">

                <p id='thanks' class='hide'>

                  Thanks for contacting us, we'll be in touch soon!

                </p>

              </div>

            </form>

          </div>

        </div>

      </div>

    </div>

  </div>

  <nav>

    <a href="#" id='back' class="hide">

      <i class="fa fa-close"></i>

    </a>

  </nav>

  if($('form#contact_form').length > 0) {

    $('form#contact_form').validate({

      messages: { },

      submitHandler: function(form) {

        $.ajax({

          type: 'POST',

          url: 'send.php',

          data: $(form).serialize(),

          success: function(data) {

            if(data.match(/success/)) {

              $(form).trigger('reset');

              $('#thanks').removeClass('hide').fadeOut(5000);

            }

          }

        });

        return false;

      }

    });

  }

这是我的发送邮件代码（我使用的是 php native）：

    $send_to = "[e-mail]";

$send_subject = "Ajax form ";

我真的很困惑。如何使用我的代码成功做出响应。有人能帮我吗。

Answer 1

我做了一些更改并进行了测试。它工作正常，试试这个，&nbsp; <div class="full black">&nbsp; &nbsp; &nbsp; <div class="large-12 columns">&nbsp; &nbsp; &nbsp; &nbsp; <h2 class="white">We are ready.</h2>&nbsp; &nbsp; &nbsp; &nbsp; <div class='form'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <form id='contact_form' action="send.php" method='POST'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="large-4 columns">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input class='required' name='name' id='name' placeholder='NAME' type='text'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="large-4 columns">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input class='required email' name='email'&nbsp; id='email' placeholder='EMAIL' type='text'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="large-4 columns">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input class='required' name='subject' id='subject' placeholder='SUBJECT' type='text'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="large-12 columns">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <textarea class='required' name='message' id ='message' placeholder='MESSAGE'></textarea>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input id="submit" class='button white boxed contact-button' type='submit' value="Send it">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p id='thanks' class='hide'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Thanks for contacting us, we'll be in touch soon!&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></div><nav>&nbsp; <a href="#" id='back' class="hide">&nbsp; &nbsp; <i class="fa fa-close"></i>&nbsp; </a></nav>在你的 javaScript 中，<script type="text/javascript">&nbsp; $("#contact_form").unbind('submit').bind('submit', function() {&nbsp; &nbsp; $(".text-danger").remove();&nbsp; &nbsp; // remove the form error&nbsp; &nbsp; $('.form-group').removeClass('has-error').removeClass('has-success');&nbsp; &nbsp; var name = $("#name").val();&nbsp; &nbsp; var email = $("#email").val();&nbsp; &nbsp; if (name === "") {&nbsp; &nbsp; &nbsp; $("#name").after('<p class="text-danger">Name field is required</p>');&nbsp; &nbsp; //&nbsp; $('#name').closest('.form-group').addClass('has-error');&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; // remov error text field&nbsp; &nbsp; &nbsp; $("#name").find('.text-danger').remove();&nbsp; &nbsp; //&nbsp; $("#name").closest('.form-group').addClass('has-success');&nbsp; &nbsp; }&nbsp; &nbsp; if (email === "") {&nbsp; &nbsp; &nbsp; $("#name").after('<p class="text-danger">email field is required</p>');&nbsp; &nbsp; //&nbsp; $('#name').closest('.form-group').addClass('has-error');&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; $("#name").find('.text-danger').remove();&nbsp; &nbsp; //&nbsp; $("#name").closest('.form-group').addClass('has-success');&nbsp; &nbsp; }&nbsp; &nbsp; //same as subject and message&nbsp;if (name && email) {&nbsp; var form = $(this);&nbsp;&nbsp;&nbsp; $.ajax({&nbsp; &nbsp; url: form.attr('action'),&nbsp; &nbsp; type: form.attr('method'),&nbsp; &nbsp; data: form.serialize(),&nbsp; &nbsp; dataType: 'json',&nbsp; &nbsp; success: function(response) {&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; if (response.success == true) {&nbsp; &nbsp; &nbsp; &nbsp; console.log(response.messages);&nbsp; &nbsp; &nbsp; &nbsp; // reset the form text&nbsp; &nbsp; &nbsp; &nbsp; $("#contact_form")[0].reset();&nbsp; &nbsp; &nbsp; $('#thanks').removeClass('hide').fadeOut(5000);&nbsp; &nbsp; &nbsp; } // if&nbsp; &nbsp; } // /success&nbsp; }); // /ajax} // ifreturn false;}); // /submit form function</script>你的 send.php 文件应该是这样的，<?php$valid['success'] = array('success' => false, 'messages' => array());$send_to = "[e-mail]";$send_subject = "Ajax form ";/*Be careful when editing below this line */$email = '[e-mail]';$f_name = cleanupentries($_POST["name"]);$f_email = cleanupentries($_POST["email"]);$f_message = cleanupentries($_POST["message"]);$from_ip = $_SERVER['REMOTE_ADDR'];$from_browser = $_SERVER['HTTP_USER_AGENT'];function cleanupentries($entry){&nbsp; &nbsp; $entry = trim($entry);&nbsp; &nbsp; $entry = stripslashes($entry);&nbsp; &nbsp; $entry = htmlspecialchars($entry);&nbsp; &nbsp; return $entry;}$message = "This email was submitted on " . date('m-d-Y') ."\n\nName: " . $f_name ."\n\nE-Mail: " . $f_email ."\n\nMessage: \n" . $f_message ."\n\n\nTechnical Details:\n" . $from_ip . "\n" . $from_browser;$send_subject .= " - {$f_name}";$headers = "From: " . $email . "\r\n" ."Reply-To: " . $f_email . "\r\n" ."X-Mailer: PHP/" . phpversion();if (!$f_email) {&nbsp; &nbsp; $valid['success'] = false;&nbsp; &nbsp; $valid['messages'] = "No email";//&nbsp; exit;} elseif (!$f_name) {&nbsp; &nbsp; $valid['success'] = false;&nbsp; &nbsp; $valid['messages'] = "No name";//&nbsp; exit;} else {&nbsp; &nbsp; if (filter_var($f_email, FILTER_VALIDATE_EMAIL)) {&nbsp; &nbsp; &nbsp; &nbsp; $mail = mail($send_to, $send_subject, $message, $headers);&nbsp; &nbsp; &nbsp; &nbsp; if ($mail = true) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $valid['success'] = true;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $valid['messages'] = "Successfully sent";&nbsp; &nbsp; &nbsp; &nbsp; //json_encode(['ressponses' => 'success']);&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $valid['success'] = false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $valid['messages'] = "Send fail";&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}echo json_encode($valid);认为这会有所帮助。