提交表单后纯JavascriptAjax请求

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
})

提交表单后纯JavascriptAjax请求

Pure Javascript Ajax request after submitting a form

javascript

php

ajax

contact-form