Question

一旦php检查用户提交是否已发送，是否可以使用jquery向用户显示消息？例如，如果用户输入了他们的姓名，电子邮件和消息。他们点击提交按钮并且消息已经被发送，然后我可以以某种方式运行一些javascript，这些javascript会在消息中淡出＆＃34;消息已发送＆＃34;。

＆＃13;

<?php
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    $from = 'From: Al-Saba.net'; 
    $to = 'lukie@al-saba.net'; 
    $subject = 'Email Inquiry';

    $body = "From: $name\n E-Mail: $email\n Message:\n $message";
?>

<?php
if ($_POST['submit']) {
    if (mail ($to, $subject, $body, $from)) { 
        echo '<p>Thank you for your email!</p>';
    } else { 
        echo '<p>Oops! An error occurred. Try sending your message again.</p>'; 
    }
}
?>

＆＃13;

  body {
     font-family: "Source Sans Pro", sans-serif;
     color: #ccc;
     z-index: -100;
     background-color: black;
     overflow: hidden;
     text-align: center;
}
 .title {
     margin-top: 20%;
     color: #56ffc6;
     font-size: 3.6em;
     opacity: .9;
     cursor: default;
     text-align: left;
}
/* Labels are titles for the text fields. You can use a placeholder instead if you like*/
 label {
     display:block;
     margin-top:20px;
     letter-spacing:2px;
}
/* Centres the form within the page */
 form {
     margin:0 auto;
     width:459px;
}
/* Styles the text boxes */
 input, textarea, file {
     width:439px;
     height:27px;
     background-color: rgba(0, 0, 0, .14);
     border-radius:5px;
     -moz-border-radius:5px;
     -webkit-border-radius:5px;
     border:1px solid #dedede;
     padding:10px;
     margin-top:3px;
     font-size:0.9em;
     color:#d6d6d6;
     transition: all .3s ease-in-out;
}
 :focus {
     outline: none !important;
     border:1px solid #36d1ed;
}
/* Styles the text area boxes (message field) */
 textarea {
     height:213px;
     background-color: rgba(0, 0, 0, .14);
}
/* Styles the submit button */
 #submit {
     color: whitesmoke;
     background-color: #5f5f5f;
     width: 250px;
     height:48px;
     text-align: center;
     border:none;
     margin-top:20px;
     cursor:pointer;
     transition: all .2s ease-in-out;
}
/* Styles the submit hover */
 #submit:hover {
     background-color: #7fd8ff;
     transform: scale(1.1);
}
 @keyframes rotate-one {
     0% {
         transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }
     100% {
         transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
}
 @keyframes rotate-two {
     0% {
         transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }
     100% {
         transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
}
 @keyframes rotate-three {
     0% {
         transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }
     100% {
         transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="form.php" method="post" enctype="multipart/form-data">
                                            <div class="noselect title">Contact</div>
                                            <label></label>
                                            <input name="name" required="required" placeholder="Your Name">
                                                <label></label>
                                                <input name="email" type="email" required="required" placeholder="Your Email">
                                                    <label></label>
                                                    <textarea name="message" cols="20" rows="5" required="required" placeholder="Message"></textarea>
                                                    <input id="submit" name="submit" type="submit" value="Submit">
                                                    </form>

＆＃13;

Answer 1

答案是是。您将需要为您的PHP脚本创建一个AJAX（异步）请求，该请求将根据发送的电子邮件执行mail()函数，或者不返回布局TRUE|FALSE返回到javascript，这基于PHP正在响应的布尔值显示error或success消息。

<强>参考：

示例：

我继续为你创建了一个模拟示例，说明了它的外观如何通过注释逐步解释如何制作AJAX request以及如何在它返回时处理response来自PHP，以及在界面上显示success或error消息的逻辑。

init=()=>{ //CREATE NEW AJAX REQUEST var request = new XMLHttpRequest(); //SET LISTENER TO HANDLE RESPONSE FROM SERVER (PHP) request.onreadystatechange = function()=>{ //IF THE STATE OF THE REQUEST CHANGES TO (4) RESPONSE HAS CAME BACK FROM SERVER if(this.readyState == 4){ //SERVER(PHP) RETURNS TRUE|FALSE IF MAIL() FUNCTION EXECUTED //THIS IS SHORTHAND (IF STATEMENT) SO IF TRUE|FALSE SET (messageText) var messageText = (this.responseText) ? 'whatever success message you want' : 'whatever error message you want'; //CREATE MESSAGE BOX var message = document.createElement('message'); //INSERT (messageText) INTO (messageBox) message.innerHTML = messageText; //APPEND TO INTERFACE document.body.appendChild(message); } } //CONFIGURE REQUEST WITH (METHOD,URL) request.open("POST","/path/to/your/php/script"); //SEND REQUEST TO PHP request.send(); } //ON DOCUMENT LOAD RUN INIT document.addEventListener('DOMContentLoaded',init);

Answer 2

$('#submit').on('submit',function(){
    //Code goes here
   //maybae fade div in thats hidden that says message sent
   //make setTimout function to hide message after x seconds
   //or make an x button that hides the div

});

一旦发送电子邮件，我可以使用javascript显示消息吗？

2 个答案: