Ajax 不刷新联系表答案

【问题标题】：Ajax not refreshing contact formAjax 不刷新联系表
【发布时间】：2020-01-16 17:20:50
【问题描述】：

我正在开发一个网站，目标是在不重新加载整个页面的情况下提交联系表单。我尝试了不同的路径，但似乎没有任何帮助。看起来“提交时”部分根本不起作用我仍然将站点留给contact_form.php。我会非常感谢任何帮助，提前谢谢

这是js部分：

$("#contact-form").on('submit', function(){
   var name = $("#form_name").val();
   var lastname = $("#form_lastname").val();
   var email = $("#form_email").val();
   var subject = $("#form_subject").val();
   var message = $("#form_message").val();

   var dataString = 'name=' + name + '&lastname=' + lastname + '&email=' + email +'&subject'+subject + '&message=' + message;
   $.ajax({
           type: "POST",
           url: "contact_form.php",
           data: dataString,
           cache: false,
           success: function(result){
                    alert(result);
                }
           });
        return false;
});

这里是html：

<form id="contact-form" method="post" action="contact_form.php" role="form">
<div class="messages"></div>
    <div class="form-row">
        <div class="col-md-12">
            <div class="form-group">
                <input id="form_name" type="text" name="name" class="form-control" placeholder="Name" required="required"  data-invalid-message="Please enter your name">
                <div class="help-block with-errors"></div>
            </div>
        </div>
        </div>
        <div class ="form-row">
        <div class="col-md-12">
            <div class="form-group">
                <input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Last name" required="required" data-invalid-message="Please enter your name">
                <div class="help-block with-errors"></div>
            </div>
        </div>
    </div>

    <div class="form-row">
        <div class="col-md-12">
            <div class="form-group">
                <input id="form_email" type="text" name="mail" class="form-control" placeholder="Email" required="required" data-invalid-message="Please enter your name">
                <div class="help-block with-errors"></div>
            </div>
        </div>
    </div>


    <div class="form-row">
        <div class="col-md-12">
            <div class="form-group">
                <input id="form_subject" type="text" name="subject" class="form-control" placeholder="Subject" required="required" data-invalid-message="Please enter your name">
            </div>
        </div>
    </div>

    <div class="form-row">
        <div class="col-md-12">
            <div class="form-group">
                <textarea id="form_message" name="message" class="form-control" placeholder="Message" rows="4" required="required" data-invalid-message="Please enter your name"></textarea>
            </div>
        </div>
        <div class="col-md-12">
            <input type="submit" class="btn btn-success" value="Send message">
        </div>
    </div>
</form>

【问题讨论】：

从表单中删除 action="contact_form.php"。
需要一些基本的调试细节添加到问题中。在提交处理程序中添加控制台或警报调用以查看它是否实际被触发。如果是...检查浏览器开发工具网络中的实际请求以了解状态...发送、接收的内容等。也应该为 ajax 使用错误处理程序。如果在您添加事件侦听器时没有触发处理程序，表单是否确实存在？没有足够的线索来缩小可能性，任何人都在猜测出了什么问题
@charlietfl 我猜它没有被触发，我在开头添加了 console.log 并没有发生任何事情 $("#contact-form").on('submit', function(e){ e .preventDefault(); console.log('test');
代码是否包含在document.ready 处理程序中？听起来您在表单元素存在之前添加了侦听器
@charlietfl 是的，这是 js 代码以 $("document").ready( function() .... 开头的其余代码

标签： php jquery ajax forms contacts

【解决方案1】：

您可以首先传递事件并停止默认行为，即点击表单的操作。

$("#contact-form").on('submit', function(e){
      e.preventDefault();
      // rest of code... ( do not return true in the end of this handler though )

【讨论】：

return false OP 正在使用的也将阻止默认，假设在到达该点之前没有发生错误