Javascript 如何在不重新加载页面的情况下使用ajax进行聊天网站

想要为我的网站创建一个完全动态的聊天界面，但是如果一个人提交了按钮页面，它会重新加载整个页面，而不应该像许多聊天网站那样重新加载

<form action="action.php" method="post" id="formpost">
<input type="text" id="input" value="php echo">
<input type="submit" value="send">
</form>

我想通过ajax提交此表单，并显示最后一个包含talk 123的xml

我想展示一下html文档中的Talk123有点困惑如何做到这一点

 //for form submit 
 $("#formpost").submit(function(e) {

 var form = $(this);
    var url = form.attr('action');

    $.ajax({
           type: "POST",
           url: action.php,
           data: form.serialize(), // serializes the form's elements.
           success: function(data)
           {
               alert(data); // show response from the php script.
           }
         });

    e.preventDefault(); // avoid to execute the actual submit of the form.
});

//for xml 

function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
  myFunction(this);
}
};
xhttp.open("GET", "name.xml", true);
xhttp.send();
}
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var msg = "";

//how to select the last person's of the <messages> child

msg = getElementsByTagName("messages").lastChild.childNodes[1].nodeValue ; 
document.getElementById("demo").innerHTML = msg;
}

注意事项 1.确保在聊天页面的head标签上添加了JQuery脚本源代码。

---

2.确保在执行任何其他代码之前立即使用preventDefault。

您可以使用反向ajax方法从服务器提取数据

在反向ajax中，请求会在特定的时间间隔自动生成，或者保留请求以获取新消息

反向ajax有三种技术：-

背负 投票 彗星

---

尝试将e.preventDefault立即放入其中。submit不是最后一条要在其中执行的指令。如果你真的想要实时聊天，你可以使用WebSocket或其他比ajax更快的技术。您所描述的是提交按钮的标准行为。不要使用提交按钮使用其他类型的按钮或默认提交事件。此外，由于JSON解析速度更快，JSON将比XML更高效。另外，作为旁注，如果你想聊天，PHP和XML真的感觉像是90年代的技术。为了实现实时性，现在我们有了承载JSON和所有内容的WebSocket。编辑：high five@Shilly是的，谢谢，但我面临的问题是什么？伙计们，我的代码都正确吗@Jeremythille你能告诉我更多关于这件事吗？我在工作中犯过什么错误吗code@Anjali这个答案在我看来相当清楚和明确，我在评论中也说过这一点。在我的代码中是否有任何错误，我们已经多次解决过了，以及关于技术选择的建议。@JeremyThille msg=getElementsByTagNamemessages.lastChild.childNodes[1].nodeValue；document.getElementByIddemo.innerHTML=msg；我不知道这是否有效，我使用的不是phph而是Ajax而不是PHP，我使用的是Ajax，是的，你使用的是PHP，而PHP和Ajax之间没有任何关系。真的，在我看来，在尝试像实时聊天这样艰难的事情之前，你应该先学习一些基础知识

 //for form submit 
 $("#formpost").submit(function(e) {

 var form = $(this);
    var url = form.attr('action');

    $.ajax({
           type: "POST",
           url: action.php,
           data: form.serialize(), // serializes the form's elements.
           success: function(data)
           {
               alert(data); // show response from the php script.
           }
         });

    e.preventDefault(); // avoid to execute the actual submit of the form.
});

//for xml 

function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
  myFunction(this);
}
};
xhttp.open("GET", "name.xml", true);
xhttp.send();
}
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var msg = "";

//how to select the last person's of the <messages> child

msg = getElementsByTagName("messages").lastChild.childNodes[1].nodeValue ; 
document.getElementById("demo").innerHTML = msg;
}

$("#formpost").on('submit', function(event){
   event.preventDefault();

  // rest of your ajax code here...  
});