使用Ajax和php与我们联系网页

Question

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

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

2-提交表单后，Contact表单输入的值将显示在URL中。 检查这张图片

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()阻止click事件正常运行，因此无需重新加载页面即可提交表单数据。