试图执行 PHP 页面的 Ajax 将我带到一个新页面答案

【问题标题】：Ajax trying to execute PHP page brings me to a new page试图执行 PHP 页面的 Ajax 将我带到一个新页面
【发布时间】：2020-01-13 00:03:22
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

你需要阻止<form>提交，默认行为是提交。您可以在表单上使用onsubmit 属性并返回false 或event.preventDefault()
return false 或使用 preventdefault 不起作用。由于某种原因，它似乎甚至没有运行 sendchat.php。它只是加载一个空白文档。
问你几个问题：“它所做的只是尝试加载 url”——你怎么知道的？ “不试图找到 sendchat.php” - 你怎么知道的？（这些东西不在帖子中）。使用浏览器控制台中的网络选项卡查看正在发送和接收的内容。把它贴出来，我会尽力帮忙的。我怀疑问题出在你的 php 脚本中。
@user1924218 而不是 innerHTML 使用 value 即：document.getElementById("sendie").value=this.responseText;

标签： javascript php ajax input onkeypress

【解决方案1】：

试试这个：

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

【讨论】：

还是什么都没有。我对不同的方法进行了编辑。还是什么都没有。
它必须与您的 DOM 结构有关。你能显示更多代码吗？

【解决方案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 页面以及传递给它的参数。似乎通过创建一个变量它也解决了其他问题。

【讨论】：