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

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

php ajax

Php 在AJAX成功后使用.innerHTML显示内容,php,ajax,Php,Ajax,这里的表单新手，我一整天都在想这个问题，但似乎无法让它正常工作我有一个简单的联系方式设置。提交有效，但本应显示的“成功消息”无效它显示了“成功”这个词，但实际上并没有添加我告诉它要添加的内容以下是表单的标记，包括脚本： <script> function _(id) { return document.getElementById(id); } function submitForm() { _("mybtn").disabled = true; _

这里的表单新手，我一整天都在想这个问题，但似乎无法让它正常工作

我有一个简单的联系方式设置。提交有效，但本应显示的“成功消息”无效

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

以下是表单的标记，包括脚本：

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


函数（id）{
返回文档.getElementById（id）；
}
函数submitForm（）{
_（“mybtn”）.disabled=true；
_（“状态”）.innerHTML=“正在发送您的邮件”；
var formdata=new formdata（）；
formdata.append（“n”，“n”）.value）；
formdata.append（“e”和“e”）值）；
formdata.append（“m”，“m”）.value）；
var ajax=new-XMLHttpRequest（）；
open（“POST”，“email_form.php”）；
ajax.onreadystatechange=函数（）{
if（ajax.readyState==4&&ajax.status==200）{
if（ajax.responseText==“成功”）{
_（“我的表单”）.innerHTML=“谢谢”+(（“n”）.value+，您的邮件已发送。”；
}否则{
_（“状态”）.innerHTML=ajax.responseText；
_（“mybtn”）.disabled=false；
}
}
}
发送（formdata）；
}
名称
电子邮件
消息

下面是处理电子邮件的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: $from\n";
$headers .= "MIME-Version: 1.0\n";
$headers .= "Content-type: text/html; charset=iso-8859-1\n";
if( mail($to, $subject, $message, $headers) ){
    echo "success";
} else {
    echo "The server failed to send the message. Please try again later.";
}
}
?>

如果有任何建议，我将不胜感激，因为我即将在这里脱发；）

提前谢谢

我已经复制了你的文件，正在为我工作（检查你是否保存了文件）。在任何情况下，我都会检查来自服务器的响应代码，因为如果出现意外输出，表单将失败。也许它在最后用新行打印“success\n”，因此它失败了

// 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;
}

//在email\u form.php中
//如果成功
http_响应_代码（200）
//如果失败500或其他错误代码。
http_响应_代码（500）
//在html中
if（ajax.readyState==4&&ajax.status==200）{
_（“我的表单”）.innerHTML='谢谢'+.''.value+'，你的…'；
}
否则{
_（“状态”）.innerHTML=ajax.responseText；
_（“mybtn”）.disabled=false；
}

测试以查看响应是否为

“success”

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

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

这意味着字符串必须是

“success”

、

“success”

、

“success\n”

或类似的字符串

i、 e.有额外的空白，你不能通过浏览呈现的HTML看到

您需要：

更改测试，使其在字符串或
修复PHP，使其不会输出额外的空白

您的代码适用于我。不知道怎么了。你确定你有一个名为

email\u form.php

的文件，并且运行在一个可以使用

php

的系统上吗？是的，文件名是正确的，电子邮件也会到达我的收件箱，所以所有这些都有效，只是由于某种原因，成功消息不会显示。你还可以检查一下成功消息是否没有隐藏在你的表单后面。例如，使用浏览器控制台。这里可能存在布局问题。如果（ajax.readyState==4&&ajax.status==200）{…console.log（ajax.responseText），您是否也可以尝试添加

…

查看您的浏览器控制台中的

ajax.responseText

的值是多少。@LarsMertens检查了它，但没有隐藏在任何东西后面，在标记中找不到它。我添加了日志，它只显示了“成功”在控制台中，它以某种方式将其作为字符串，而不是函数的状态。希望不要问得太多，但请您详细说明您提出的解决方案吗？；）我检查了所有空格，甚至删除并重写了它，以确保。

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

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

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