文章摘要
本文主要介绍了如何在网页中实现数据初始化功能和留言功能。在数据初始化部分，通过使用`XMLHttpRequest`对象发送`GET`请求至服务器，接收响应数据并将其转换为DOM节点，动态加载到页面中。在留言功能部分，通过`POST`请求向服务器提交留言内容，并根据服务器的响应状态（成功或失败）进行相应处理，包括重新加载页面或提示错误信息。文章整体展示了如何通过JavaScript实现 AJAX数据加载和用户交互功能。
//———————————实现页面初始化数据 Start———————————
<script>
//初始化，加载数据
loadData();
//获取已经存在的数据，加载到页面中
function loadData() {
//1.新建xhr 对象
var xhr=new XMLHttpRequest();
//2.设置请求参数和url
xhr.open(‘GET’, ‘/getMsg’);
//3.调用send方法 发送请求
xhr.send();
//4.接收一个参数 返回服务器的响应结构
xhr.onload=function () {
//JSON转换成数组
var arr=JSON.parse(this.response);
//开始遍历数组
var str=”;
arr.forEach(function (ele) {
//将循环遍历出来的拼接到到一个字符串中，
str +=`<li class=”media”>
<img class=”mr-3″ src=”https://www.jb51.net/article/avatar.png” alt=${ele.name}>
<div class=”media-body”>
<h4>${ele.name}</h4>
<p>${ele.content}</p>
</div>
</li>`;
});
//获取ul 将拼接的li 放置到ul 中
var mes=document.getElementById(‘messages’);
mes.innerHTML=str;
//清空默认显示 拼命加载中
if (mes.childNodes.length !=0) {
//获取拼命加载中id
var loadMes=document.getElementById(‘loading’);
loadMes.innerHTML=””;
}
}
}
</script>
//————————————实现页面初始化数据 end————————
//————————实现页面添加留言功能 Start——————————
<script>
//添加一个发表留言的功能
//新增的方法
//获取提交按钮
var btn_send=document.getElementById(“btn_send”);
btn_send.onclick=function () {
//1.新建xhr 对象
var xhr=new XMLHttpRequest();
//2.设置请求参数和url
xhr.open(‘POST’, ‘/addMsg’);
//3.设置请求头
xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);
//获取称呼内容
var txt_name=document.getElementById(“txt_name”);
//获取留言内容
var txt_content=document.getElementById(“txt_content”);
//4.调用send方法 发送请求
xhr.send(‘name=’ + txt_name.value + ‘&content=’ + txt_content.value);
//5.接收一个参数 返回服务器的响应结构
xhr.onload=function () {
if (this.response===”true”) {
//添加完毕之后，重新加载
loadData();
//添加完毕之后清空输入栏文本
txt_name.value=txt_content.value=”;
} else {
alert(“添加失败”);
}
}
}
</script>
//——————————实现页面添加留言功能 end————————————