Question

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

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

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

<messages category="short">
<person1>
<time>
r
<message>Djssjs</message>
</time>
</person1>
<person2>
<time>
r
<message>1234fdg</message>
</time>
</person2>
<person1>
<time>
 r
<message> talk 123</message>
</time>
</person1>
</messages>

我想让html文档中的第123条对话混淆了该怎么做

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

Answer 1

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

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

注意事项
1.确保您还在聊天页面的head标签上添加了JQuery脚本源。
2.确保在执行任何其他代码之前立即放置preventDefault（）。

Answer 2

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

在反向ajax中，将在特定时间间隔自动生成一个请求，或保留该请求以获取新消息。

反向Ajax有三种技术：-

背ggy式
投票
彗星

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

2 个答案: