javascript - 使用 Ajax 和 php 联系我们的网页

Question

我想在单击发送按钮时不刷新页面的情况下创建联系我们的网页。我的代码如下，但是有一些问题:

1-提交表单后刷新页面。

2- 提交表单后，联系表单输入的值出现在 URL 中。 check this image

3- 确认消息出现 0.25 秒然后消失或不出现。

4- 当我使用 Firefox 浏览器时，我的电子邮件地址没有收到电子邮件。
请帮助我解决这些问题。

HTML

<div class="col-sm-8 col-sm-offset-2" id="mail-status">


                </div>
                <div class="container-fluid">
                    <div class="row"> 
                        <div class="col-sm-8 col-xs-12 col-sm-offset-2">
                            <div class="well">
                                <form class="form-horizontal">
                                    <fieldset>
                                      <legend class="legend-title">I'd <span class="heart"><i class="fa fa-heart"></i></span> to contact you!</legend>
                                        <div class="form-group">
                                          <label for="inputName" class="col-sm-2 control-label">Name</label>
                                          <div class="col-sm-9">
                                                <input type="text" class="form-control" id="inputName" name="name" placeholder="Name" required="required">
                                          </div>
                                        </div>
                                        <div class="form-group">
                                          <label for="inputEmail" class="col-sm-2 control-label">Email</label>
                                          <div class="col-sm-9">
                                                <input type="email" class="form-control" id="inputEmail" name="email" placeholder="Email" required="required">
                                          </div>
                                        </div>
                                        <div class="form-group">
                                          <label for="inputSubject" class="col-sm-2 control-label">Subject</label>
                                          <div class="col-sm-9">
                                                <input type="text" class="form-control" id="inputSubject" name="subject" placeholder="Subject" required="required">
                                          </div>
                                        </div>
                                        <div class="form-group">
                                          <label for="textAreaMessage" class="col-sm-2 control-label">Message</label>
                                          <div class="col-sm-9">
                                                <textarea class="form-control" rows="5" id="textAreaMessage" name="message" placeholder="Message" required="required" minlength=5 ></textarea>
                                          </div>
                                        </div>
                                        <div class="form-group">
                                          <div class="col-sm-3 col-sm-offset-8">
                                                <button type="submit" class="btn btn-primary right-button" id="send" onClick="sendContact()">Send</button>
                                          </div>
                                        </div>
                                    </fieldset>
                                </form>

Javascript

function sendContact() {
            jQuery.ajax({
            url: "send_email.php",
            data:'inputName='+$("#inputName").val()+'&inputEmail='+$("#inputEmail").val()+'&inputSubject='+$("#inputSubject").val()+'&textAreaMessage='+$(textAreaMessage).val(),
            type: "POST",
            success:function(data){
            $("#mail-status").html(data);
            },
            error:function (){}
            });
        }   

PHP

                <?php
                $toEmail = "*****@***.com";
                $mailHeaders = "From: " . $_POST["inputName"] . "<". $_POST["inputEmail"] .">\r\n";
                if(mail($toEmail, $_POST["inputSubject"], $_POST["textAreaMessage"], $mailHeaders)) {
                print "<div class='alert alert-success'> <button type='button' class='close' data-dismiss='alert'>&times;</button> Thank you for your email!  I will be in touch.</div>";
                } else {
                print "<div class='alert alert-danger'> <button type='button' class='close' data-dismiss='alert'>&times;</button> We are sorry, but there is a problem.  Please Make sure all fields are filled!</div>";
                }
                ?>`

Answer 1

去掉 HTML 中的内联 onclick() 事件，让 JavaScript 处理点击:

$('#send').click(function(e){
    e.preventDefault();
    sendContact();
});

preventDefault() 阻止点击事件正常运行，因此您的表单数据无需重新加载页面即可提交。