Question

我不擅长编程，我正在尝试制作一份联系表格，并在同一页面上发送回复信息。

<form id="contact_form" method="post" action="send.php">

// fields

</form>

send.php包含一个用于发送邮件和其他控件的PHPMailer函数，因此如果禁用了js，用户将被重定向到index.php并显示成功或错误消息。

但是当js处于活动状态时，验证函数会检查是否所有字段都已填满，然后启动ajax请求，这是js.js文件中的代码

function validate(e) {
    if (error_type === 1) {
            e.preventDefault();
            // display errors for every fields
        } else {

            var url = "send.php";
            var params = fileds_value;
            xhttp = new XMLHttpRequest();
            xhttp.open("POST", "url", true);
            xhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhttp.onload = function() {
                if (xhttp.readyState == 4 && xhttp.status === 200 && xhttp.responseText) {
                    //display success message

                }
                else if (xhttp.status !== 200 || !xhttp.responseText) {
                    //display error message

                }
            };
            xhttp.send(JSON.stringify(params));
         }

    }}
window.onload = function() {
    document.getElementById("contact_form").addEventListener("submit", function(e){
        validate(e);
    });
};

我需要发送带有请求的表单数据，以防止页面被刷新，对吗？

和send.php

if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'XMLHttpRequest') {

  header('Content-Type: application/x-www-form-urlencoded');
  echo $ajax_message;
}
// else just display the message
else {

  redirect_to($message);
}

但是在按下提交按钮后，页面被真实地加载，我看到PHP成功消息，我的目标是使用ajax使页面显示成功消息，而无需重新加载页面。

编辑：@IncredibleHat我编辑了代码以显示事件的处理方式，因此我必须始终阻止默认行为并发送表单数据，然后在php中我可以像往常一样获取post变量吗？

Answer 1

在事件处理程序的顶部使用event.preventDefault();，而不是将其包装在条件中。

如果你的表单在其他html元素中，请同时尝试event.stopPropagation();，因为它会阻止事件冒泡并由父元素的侦听器处理

最后你会得到类似的东西：

form.addEventListener('submit',function(){
    event.preventDefault();
    event.stopPropagation();

    if (error_type === 1) 
         //doWhatever
    //..... perform ajax request
})

提交表单

1 个答案: