Ajax尝试执行PHP页面将我带到一个新页面

Question

我正在尝试使用PHP和mysql以及AJAX进行实时聊天。它几乎完全正常运行，除了我似乎无法弄清楚如何在不重新加载页面的情况下提交聊天消息。我有一个页面，sendchat.php，它从前一页获取输入并将数据输入数据库。我正在尝试使用文本输入字段，当用户单击 Enter 键时，它将执行 PHP 页面，其中包含发送到 sendchat 所需的详细信息.php而无需实际加载或刷新页面。这是我到目前为止所拥有的：

<form id="send-message-area">
<p>Your message: </p>
<input type="text" id="sendie" maxlength = '100' onkeydown="onChatEnter(this);"></textarea>
</form>
</div>
</td></tr></table>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">

function onChatEnter(str) {
if(event.key === 'Enter') {
$.ajax({
type: "GET",
url: "sendchat.php?msg=" + str ,
success : function() { 
// here is the code that will run on client side after running clear.php on server

}
});
}
</script>

它所做的只是尝试加载 url，但它不会尝试查找 sendchat.php或发送数据。相反，它只是尝试加载一个空白页。我哪里出错了？一切似乎拼写正确且区分大小写。我检查用户在按键时是否按了回车键。如果他们这样做了，我正在加载一个 AJAX 函数来执行 PHP 页面。然而，它并没有这样做。仅供参考，我不希望单击那里的按钮。

编辑：

我尝试了下面的建议，但仍然一无所获。我现在决定尝试一种不同的方法。仍然不起作用。

<script>
function updatechat(str) {
if(event.key === 'Enter') {
if (str=="") {
document.getElementById("sendie").innerHTML="";
return;
} 
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
document.getElementById("sendie").innerHTML=this.responseText;
}
}
xmlhttp.open("GET","sendchat.php?msg="+str,true);
xmlhttp.send();
}
}
</script>
<p>Your message: </p>
<input type="text" id="sendie" maxlength = '100' onkeypress="updatechat(this.value);"></input>

Answer 1

试试这个：

$("#send-message-area").submit(function(e) {
e.preventDefault();
e.stopPropagation(); 
});

Answer 2

我不确定如何。.但我修好了..我认为这与为输入命名和 ID 有关。见下文：

<script language="javascript" type="text/javascript">
function updatechat(str) {
if(event.key === 'Enter') {

if (str=="") {
document.getElementById("sendie").innerHTML="";
return;
} 
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
document.getElementById("sendie").innerHTML=this.responseText;
}
}
var planetloc = document.getElementById("loc").value;
chaturl = "sendchat.php?msg="+str+"&loc="+planetloc;
sendie.value="";
xmlhttp.open("GET",chaturl,true);
xmlhttp.send();
}
}
//-->
</script>

这是我用于 html 的代码：

<p>Your message: </p>
<input type='text' id='sendie' name='sendie' maxlength = '100' onkeypress='updatechat(this.value);'></input>
<input type='hidden' id='loc' name='loc' value='$chatroom'></input>";

我还添加了chaturl来组合我需要的 ajax 页面以及传递给它的参数。似乎通过为此创建一个变量，它也解决了其他问题。