如何使用 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

我做了一些更改并进行了测试。它工作正常，试试这个，

  <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' id='name' placeholder='NAME' type='text'>

            </div>

            <div class="large-4 columns">

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

            </div>

            <div class="large-4 columns">

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

            </div>

            <div class="large-12 columns">

              <textarea class='required' name='message' id ='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>

在你的 javaScript 中，

<script type="text/javascript">

  $("#contact_form").unbind('submit').bind('submit', function() {

    $(".text-danger").remove();

    // remove the form error

    $('.form-group').removeClass('has-error').removeClass('has-success');

    var name = $("#name").val();

    var email = $("#email").val();

    if (name === "") {

      $("#name").after('<p class="text-danger">Name field is required</p>');

    //  $('#name').closest('.form-group').addClass('has-error');

    } else {

      // remov error text field

      $("#name").find('.text-danger').remove();

    //  $("#name").closest('.form-group').addClass('has-success');

    }

    if (email === "") {

      $("#name").after('<p class="text-danger">email field is required</p>');

    //  $('#name').closest('.form-group').addClass('has-error');

    } else {

      $("#name").find('.text-danger').remove();

    //  $("#name").closest('.form-group').addClass('has-success');

    }

    //same as subject and message 

if (name && email) {

  var form = $(this);

  

  $.ajax({

    url: form.attr('action'),

    type: form.attr('method'),

    data: form.serialize(),

    dataType: 'json',

    success: function(response) {

    

      if (response.success == true) {

        console.log(response.messages);

        // reset the form text

        $("#contact_form")[0].reset();

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

      } // if

    } // /success

  }); // /ajax

} // if

return 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)

{

    $entry = trim($entry);

    $entry = stripslashes($entry);

    $entry = htmlspecialchars($entry);

    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) {

    $valid['success'] = false;

    $valid['messages'] = "No email";

//  exit;

} elseif (!$f_name) {

    $valid['success'] = false;

    $valid['messages'] = "No name";

//  exit;

} else {

    if (filter_var($f_email, FILTER_VALIDATE_EMAIL)) {

        $mail = mail($send_to, $send_subject, $message, $headers);

        if ($mail = true) {

            $valid['success'] = true;

            $valid['messages'] = "Successfully sent";

        //json_encode(['ressponses' => 'success']);

        } else {

            $valid['success'] = false;

            $valid['messages'] = "Send fail";

        }

    }

}

echo json_encode($valid);

认为这会有所帮助。