原生ajax动态添加数据
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script> function ajax(method, url, date,success){ var xhr = null;
try{
xhr = new XMLHttpRequest();
}catch(e){
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
if(method == 'get' && date){
url += '?'+date;
}
xhr.open(method,url,true); if(method == 'get'){
xhr.send();
}else{
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.send(date);
} xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
success && success(xhr.responseText);
}else{
alert('出错了'+xhr.status);
}
}
}
} window.onload = function(){
var btn = document.getElementById('btn');
btn.onclick = function(){
ajax('get', 'getNews.php', '',function(date){
var date = JSON.parse(date);
var oUl = document.getElementById('list');
var value = '';
for(var i=0;i<date.length;i++){
value += '<li><a href="#">'+date[i].title+'</a> <span>'+date[i].date+'</span></li>'
}
oUl.innerHTML = value;
});
var timer = null;
clearInterval(timer);
timer = setInterval(function(){
ajax('get','getNews.php','',function(date){
var date = JSON.parse(date);
var oUl = document.getElementById('list');
var value = '';
for(var i=0;i<date.length;i++){
value += '<li><a href="#">'+date[i].title+'</a> <span>'+date[i].date+'</span></li>'
}
oUl.innerHTML = value;
});
},3000);
}; };
</script>
</head> <body>
<input type="button" value="按钮" id="btn"/>
<ul id="list"></ul>
</body>
</html>
<?php
header('content-type:text/html; charset="utf-8"');
error_reporting(0); $news = array(
array('title'=>'12121212121牌','date'=>'2018-6-8'),
array('title'=>'美又打2000亿关税牌','date'=>'2018-6-1'),
array('title'=>'北京平均可月省约150','date'=>'2018-6-2'),
array('title'=>'个税起征点提至5000','date'=>'2018-6-3'),
array('title'=>'美又打2000亿关税','date'=>'2018-6-4'),
array('title'=>'哥伦比亚vs日本:J罗','date'=>'2018-6-5'),
array('title'=>'北京时间"一粽浓情"活动结束','date'=>'2018-6-6'),
);
echo json_encode($news);
原生ajax动态添加数据的更多相关文章
- Jquery+Ajax实现Select动态添加数据
https://blog.csdn.net/zhengxiangwen/article/details/46480687 最近在工作中,遇到了一个关于select的问题.一般情况下,select下拉框 ...
- js表单动态添加数据并提交
情景1:已经存在form对象了,动态为form增加对象并提交 function formAppendSubmit(){ var myform=$('#newArticleForm'); //得到for ...
- 【javascript 动态添加数据到 HTML 页面】
今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识,javascript 动态添加数据到 HTML 页面的问题. [学习目标]有如下的一组数据通过 Ajax ...
- 第27讲 UI组件之 ScrollView与底部动态添加数据
第27讲 UI组件之 ScrollView与底部动态添加数据 1. ScrollView(滚动视图) ScrollView(滚动视图)是实现滚动的一个控件,只需要将需要滚动的控件添加到ScrollVi ...
- 原生JS动态添加和删除类
原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...
- Android之ListView动态添加数据（SQLiteOpenHelper类添加数据）
一.SQLiteOpenHelper类: 这次我们通过sqlite来动态添加数据,接下来我们创建一个openHelper.java,在前面sqlite博客中我们已经详细的讲了SQLite的创建及使用等 ...
- 原生js动态添加style，添加样式
原生js动态添加style,添加样式 第一种 var style="[assign-url='"+str+"']{display:initial}"; var ...
- echarts通过ajax动态获取数据的方法
echarts表格的数据一般都需要动态获取,所以总结了一下通过ajax动态获取数据的操作: 插入的方法应该不止一种,我也是接触不久,所以刚学会了一种插入方法: 灵感和经验来自:https://www. ...
- ASP.NET网页动态添加数据行
一看到这标题<ASP.NET网页动态添加数据行>,想起来似乎有点难实现.因为网页的周期性原因,往往在PostBack之后,状态难于有所保留.但Insus.NET又想实现这样的效果,用户点击 ...
随机推荐
- mysql配置白名单
1. 测试是否允许远程连接 $ telnet 192.168.1.8 3306 host 192.168.1.4 is not allowed to connect to this mysql ser ...
- struts2 标签s:select在table中单行显示
<table class="query_form_table"> <tr> <th>用户 ...
- 密码子演化假说|凝固事件假说|立体化学假说|共进化假说|代谢途径相关性假说|四重兼并|假四重兼并|最小损伤原则|AU-rich|GC-rich|逐步进化假说|分子机制进化假说
生命组学 将密码子表重排后发现,嘌呤嘧啶含量不同,密码子的氨基酸种类由第一二位决定,同时第三位变化大却没有蛋白质层面上实质性的改变,这说明第三位氨基酸是用于维持氨基酸组成不发生变化同时保证蛋白质稳定性 ...
- iOS(Swift)学习笔记之SnapKit+自定义UI组件
本文为原创文章,转载请标明出处 1. 通过CocoaPods安装SnapKit platform :ios, '10.0' target '<Your Target Name>' do u ...
- 吴裕雄--天生自然 R语言开发学习：导入数据
2.3.6 导入 SPSS 数据 IBM SPSS数据集可以通过foreign包中的函数read.spss()导入到R中,也可以使用Hmisc 包中的spss.get()函数.函数spss.get() ...
- Pytorch collate_fn用法
By default, Dataloader use collate_fn method to pack a series of images and target as tensors (first ...
- 吴裕雄--python编程：CGI编程
什么是CGI CGI 目前由NCSA维护,NCSA定义CGI如下: CGI(Common Gateway Interface),通用网关接口,它是一段程序,运行在服务器上如:HTTP服务器,提供同客户 ...
- [大餐]开发摘记1--我的Fragment通信的框架
[大餐]开发摘记1--我的Fragment通信的框架 | 卖牙膏的芖口钉 盒子 盒子 博客 分类 标签 友链 大专栏 [大餐]开发摘记1--我的Fragment通信的框架ass="ROUN ...
- RocketMQ borker配置文件
master节点:serverSelectorThreads = 3 brokerRole = SYNC_MASTER serverSocketRcvBufSize = 131072 osPageCa ...
- Nginx+PHP配置错误，日志：[error] 24324#0: *31 FastCGI sent in stderr: "Primary script unknown" while reading response header from upstream
一.问题现象 1.安装nginx.php.php-fpm后,浏览器访问php报错,“File not found”: 二.问题排查 1.检查nginx.php-fpm服务是否正常启动,均正常启动: 2 ...