0

我有一个简单的表单来从一个人向另一个人发送消息，并且消息是由 AJAX 使用 POST 方法发送的，无需重新加载页面。我有一个，问题是当用户在此字段中按 [ENTER] 时，AJAX 不起作用并且页面被重新加载。我 qant 一个表单，当用户按 ENTER 时，ajax 运行正常。

请参阅我的文档：-Javascript：

function enviarMensagem()
    {
        var remetente = document.getElementById('remetente').value;
        var destinatario = document.getElementById('destinatario').value;
        var mensagem = document.getElementById("mensagem").value;
        if(mensagem.length == 0 || mensagem.length  > 128)
        {
            return;
        }
        xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function()
        {
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
            {
                document.getElementById("mensagens").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("POST", "saida.php", true);
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.send("remetente=" + remetente + "&destinatario=" + destinatario + "&mensagem=" + mensagem);
    }

-HTML：

<form action="" >
    <input type="hidden" id="remetente" name="remetente" value="Erick">
    <input type="hidden" id="destinatario" name="destinatario" value="Fernanda">
    <input type="text" id="mensagem" /> <input type="button" value="Enviar" onclick="enviarMensagem();">
</form>
<div id="mensagens"></div>
4

1 回答 1

1

问题是您只是将 Ajax 函数应用于按钮的 onclick 处理程序。您需要将其添加到表单的 onsubmit 操作中。

<form action=""  onsubmit="enviarMensagem(); return false;">
<input type="hidden" id="remetente" name="remetente" value="Erick">
<input type="hidden" id="destinatario" name="destinatario" value="Fernanda">
<input type="text" id="mensagem" /> <input type="button" value="Enviar" >

可以通过单击提交按钮或使用 Enter 键的 keyup 事件来启动表单上的提交。将侦听器添加到 onsubmit 操作涵盖了两者。

于 2012-09-21T15:24:56.193 回答