通过AJAX获取数据列表

前端代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>通过AJAX获取数据列表</title><style>* {margin: 0;padding: 0;}ul {list-style: none;}h3 {padding: 0;text-align: center;border-bottom: 1px solid #ccc;}#list li {padding: 6px 4px;border-bottom: 1px solid #ccc;}#list li a {float: right;text-decoration: none;color: red;font-weight: 700;}</style><script>window.onload = function () {//给A链接添加删除事件var oList = document.getElementById('list'),aA = oList.getElementsByTagName('a');//添加删除功能oList.onclick = function (ev) {varev = ev || window.event,oTarget = ev.srcElement || ev.target;if(oTarget.tagName === 'A'){oList.removeChild(oTarget.parentNode);}}//通过AJAX获取实时数据if(window.ActiveXObject){var oXr = new window.ActiveXObject('Microsoft.XMLHTTP');}else {var oXhr = new XMLHttpRequest();}oXhr.open('GET','http://localhost/ajax/ajax1.php');oXhr.send();oXhr.onreadystatechange = function () {if(oXhr.readyState === 4 && oXhr.status === 200){var oData = JSON.parse(oXhr.responseText);for(var i = 0; i < oData.length; i++){varoLi = document.createElement('li');oLi.innerHTML = '<a href="javascript:;">&times;</a>' + oData[i].name;oList.appendChild(oLi);}console.log(JSON.parse(oXhr.responseText));}}}</script>
</head>
<body><h3>明星列表</h3><ul id="list"></ul>
</body>
</html>

后端代码：

<?phpheader("Access-Control-Allow-Origin:*");$json = array(array('id'=>1,'name'=>'刘德华','age'=>56,),array('id'=>2,'name'=>'张学友','age'=>56,),array('id'=>3,'name'=>'郭富城','age'=>56,),array('id'=>4,'name'=>'梁家辉','age'=>56,));echo json_encode($json);
?>

通过AJAX获取数据列表相关推荐

通过ajax获取的数据怎怎么在html上,Ajax获取数据然后显示在页面的实现方法
主要功能流程介绍循环获取列表数据点击列表数据进入详情页点击报名参加弹出报名成功提示框点击提示框中的确定按钮,跳回列表页代码实现流程和解说 1.访问链接list.PHP时判断是pc端还是客户端 ...
vue定时ajax获取数据,vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: new Vue({ el:'#app', data:{data:&qu ...
ajax 微信code获取_获取链接的参数，判断是否是微信打开，ajax获取数据
//获取链接参数 function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "= ...
ajax获取数据中文乱码问题最简单的完美解决方案
ajax获取数据中文乱码问题最简单的完美解决方案参考文章: (1)ajax获取数据中文乱码问题最简单的完美解决方案 (2)https://www.cnblogs.com/konglxblog/p/1 ...
vue 读取ajax数据,详解vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: new Vue({ el:'#app', data:{data:&qu ...
(vue)在ajax获取数据时使用loading组件不起作用
问题描述: 在用ajax获取数据时页面没有变化,想用一个loading图标在获取数据时显示,获取完成后隐藏整个系统用到了vue框架,在执行sure方法时调用ajax函数 sure() {conso ...
Chart.js使用及ajax获取数据
图表插件Chart.js使用插件简介安装插件简介 chart.js是一个优秀的开源图表处理插件,内置条形,折现,雷达,时间刻度等等图表渲染. 安装 chart.js官网. 我这里使用2019年3 ...
【四二学堂】jquery方式ajax获取数据并渲染页面
var newsData = ''; var mydata = {"pageNum":obj.curr,"pageSize":"5"}; / ...
jQuery中ajax获取数据赋值给页面
//html代码 <a href="javascript:void(0)" class="cityname" id="{$rr[code]}&q ...

通过AJAX获取数据列表

通过AJAX获取数据列表相关推荐

最新文章

热门文章