在 AJAX 成功后使用 .innerHTML 显示内容

新手在这里形成，我一整天都试图弄清楚这个问题，但似乎无法让它正常工作。

我有一个简单的联系表格设置。提交有效，但应该显示的"成功消息"却无效。

它

显示了"成功"这个词，但实际上并没有添加我告诉它添加的内容。

下面是包含脚本的表单的标记：

<script>
function _(id) {
    return document.getElementById(id);
}
function submitForm() {
    _("mybtn").disabled = true;
    _("status").innerHTML = 'Your message is being sent';
    var formdata = new FormData();
    formdata.append("n", _("n").value);
    formdata.append("e", _("e").value);
    formdata.append("m", _("m").value);
    var ajax = new XMLHttpRequest();
    ajax.open("POST", "email_form.php");
    ajax.onreadystatechange = function() {
        if (ajax.readyState == 4 && ajax.status == 200) {
            if (ajax.responseText == "success") {
                _("my_form").innerHTML = '<h2>Thanks ' + _("n").value + ', your message has been sent.</h2>';
            } else {
                _("status").innerHTML = ajax.responseText;
                _("mybtn").disabled = false;
            }
        }
    }
    ajax.send(formdata);
}
</script>
</head>
<body>
<div id="mc-form">
<form id="my_form" onsubmit="submitForm(); return false;">
<div class="form-group">
    <label class="control-label" for="inputNormal">Name</label>
    <input id="n" type="text" class="form-control" placeholder="Name" required />
</div>
<div class="form-group">
    <label class="control-label" for="inputNormal">Email</label>
    <input id="e" type="email" class="form-control" placeholder="Email" required/>
</div>
<div class="form-group">
    <label class="control-label" for="inputWarning">Message</label>
    <textarea id="m" rows="10" class="form-control" placeholder="Message" required></textarea>
</div>
<input id="mybtn" type="submit" value="Submit Form"> <span id="status"></span>
</form>
</div>

这是处理电子邮件的 php：

<?php
if( isset($_POST['n']) && isset($_POST['e']) && isset($_POST['m']) ){
$n = $_POST['n'];
$e = $_POST['e'];
$m = nl2br($_POST['m']);
$to = "admin@martinconde.com";  
$from = $e;
$subject = 'Contact Form Message';
$message = '<b>Name:</b> '.$n.' <br><b>Email:</b> '.$e.' <p>'.$m.'</p>';
$headers = "From: $fromn";
$headers .= "MIME-Version: 1.0n";
$headers .= "Content-type: text/html; charset=iso-8859-1n";
if( mail($to, $subject, $message, $headers) ){
    echo "success";
} else {
    echo "The server failed to send the message. Please try again later.";
}
}
?>

任何指示将不胜感激，因为我即将在这里拔头发;)

提前感谢！

if (ajax.responseText == "success") {

进行测试以查看响应是否"success" 。

   _("my_form").innerHTML = '<h2>Thanks ' + _("n").value + ', your message has been sent.</h2>';

如果是，那么您会看到此消息。

由于您没有看到该消息，因此无法"success"响应。

} else {
    _("status").innerHTML = ajax.responseText;

因此，此代码将运行，消息的内容将添加到页面中。

在那里你可以看到这是成功。

这意味着字符串必须是" success"、"success "、"successn"或类似的。

即，还有额外的空格，您可以通过浏览渲染的 HTML 来查看。

您需要：

更改测试，使其在字符串中查找成功或
修复 PHP，使其不会输出额外的空格

我已经复制了您的文件并为我工作（检查您是否保存了文件）。无论如何，我会检查来自服务器的响应代码，因为如果有意外的输出，表单将失败。也许它的打印"成功"在末尾有换行符，因此它失败了。

// in email_form.php
// if successfull
http_response_code (200)
// if fails 500 or another error code.
http_response_code (500)
// In html
if (ajax.readyState == 4 && ajax.status == 200) {
  _("my_form").innerHTML = '<h2>Thanks ' + _("n").value + ', your...';
}
else {
   _("status").innerHTML = ajax.responseText;
   _("mybtn").disabled = false;
}

相关内容

最新更新

热门标签：