javascript - 使用 ajax 运行 php 脚本显示没有结果

Question

我正在尝试在提交表单后使用 ajax 运行 php 脚本。这是表格

<form id="form" class="form">
    <input id="email" type="email" required name="email" placeholder="Email" onchange="myUpdateFunction()" value="">
    <textarea id="message" type="text" value="" name="message" onchange="myUpdateFunction()" required placeholder="Comments" style="border:none;border-bottom:1px solid #424242; width:530px;"></textarea>
    <input id="submit" type="submit" class="submit" name="send_request" value="Submit" >
</form>

这是我的脚本

$('.submit').on('click', function() {
        $.ajax({
          url: "send.php",
          method:'post',
          data: {'email': $('#email').val(), 'message': $('#message').val()}
        }).done(function() {
            alert('Message Sent.');

        });
   });

这是我的 send.php 文件

<?php 

if(isset($_POST['send_request'])){
    //send email
}

?>

但它不起作用，页面重新加载，电子邮件没有发送，也没有显示“警告消息”

在 php 中没有问题，因为如果我删除 javascript 并在它工作的表单中添加 action="send.php"method="POST"作为属性，所以我认为问题出在 javascript 上

Answer 1

http://jsfiddle.net/o5xvpkmv/2/

你不应该对这种东西使用 onchange 或 click 事件，而应该使用提交事件(防止提交按钮的默认行为)。

<form id="form" class="form">
    <input id="email" type="email" name="email" placeholder="Email" required>
    <textarea id="message" type="text" value="" name="message" placeholder="Comments" required></textarea>
    <input id="submit" type="submit" class="submit" name="send_request" value="Submit">
</form>


$("#form").on('submit', function(e) {
    e.preventDefault();
    $.ajax({
       url: "send.php",
       method:'post',
       data: $( this ).serialize()
     }).done(function() {
         alert('Message Sent.');
     });
});

或者(两种方式都好)

$(document).ready(function () {
    $('#submit').click(function () {
        $.ajax({
            url: "send.php",
            method: 'post',
            data: $(this).serialize()
        }).done(function () {
            alert('Message Sent.');
        });
        return false;
    });
});

另外，关于后端，你应该做这样的检查:

if (
    isset($_POST["email"]) && 
    !empty($_POST["email"]) &&
    isset($_POST["message"]) && 
    !empty($_POST["message"])) {
        //send email   
}