<!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>&nbsp;<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>&nbsp;<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动态添加数据的更多相关文章

  1. Jquery+Ajax实现Select动态添加数据

    https://blog.csdn.net/zhengxiangwen/article/details/46480687 最近在工作中,遇到了一个关于select的问题.一般情况下,select下拉框 ...

  2. js表单动态添加数据并提交

    情景1:已经存在form对象了,动态为form增加对象并提交 function formAppendSubmit(){ var myform=$('#newArticleForm'); //得到for ...

  3. 【javascript 动态添加数据到 HTML 页面】

    今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识,javascript 动态添加数据到 HTML 页面的问题. [学习目标]有如下的一组数据通过 Ajax ...

  4. 第27讲 UI组件之 ScrollView与底部动态添加数据

    第27讲 UI组件之 ScrollView与底部动态添加数据 1. ScrollView(滚动视图) ScrollView(滚动视图)是实现滚动的一个控件,只需要将需要滚动的控件添加到ScrollVi ...

  5. 原生JS动态添加和删除类

    原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...

  6. Android之ListView动态添加数据（SQLiteOpenHelper类添加数据）

    一.SQLiteOpenHelper类: 这次我们通过sqlite来动态添加数据,接下来我们创建一个openHelper.java,在前面sqlite博客中我们已经详细的讲了SQLite的创建及使用等 ...

  7. 原生js动态添加style，添加样式

    原生js动态添加style,添加样式 第一种 var style="[assign-url='"+str+"']{display:initial}"; var ...

  8. echarts通过ajax动态获取数据的方法

    echarts表格的数据一般都需要动态获取,所以总结了一下通过ajax动态获取数据的操作: 插入的方法应该不止一种,我也是接触不久,所以刚学会了一种插入方法: 灵感和经验来自:https://www. ...

  9. ASP.NET网页动态添加数据行

    一看到这标题<ASP.NET网页动态添加数据行>,想起来似乎有点难实现.因为网页的周期性原因,往往在PostBack之后,状态难于有所保留.但Insus.NET又想实现这样的效果,用户点击 ...

随机推荐

  1. cs231n spring 2017 lecture6 Training Neural Networks I

    1. 激活函数: 1)Sigmoid,σ(x)=1/(1+e-x).把输出压缩在(0,1)之间.几个问题:(a)x比较大或者比较小(比如10,-10),sigmoid的曲线很平缓,导数为0,在用链式法 ...

  2. left join on和where 限制查询的区别在于

    left join on: 会显示前表的所有数据,不满足显示为null或者为0 . 而where显示的为满足条件的记录,不满足但是存在的数据不显示. 做统计数据的时候,用join on比较合理.

  3. [LC] 221. Maximal Square

    Given a 2D binary matrix filled with 0's and 1's, find the largest square containing only 1's and re ...

  4. jmeter常用定时器以及事物控制器

    定时器(并发):Synchronizing Timer 事物控制器: 勾选Generate parent sample当单看主要数据和页面数据性能测试结果还是有比较大的差异的,因而在进行页面性能测试的 ...

  5. SHELL用法八（Grep语句）

    1.SHELL编程Grep语句案例实战 1)Find是Linux操作系统文件和目录的路径检索.查询工具,而Grep是Linux系统下文本文件内容检索或者匹配工具,Grep称为全局正则表达式检索工具,在 ...

  6. windows下Jmeter压测端口占用问题

    https://blog.csdn.net/weixin_43757847/article/details/88188091 1 前情提要人脸识别项目中,云平台新增了人脸识别的校验接口.考虑到存在大量 ...

  7. 吴裕雄--天生自然python学习笔记：Python3 正则表达式

    Python 自1.5版本起增加了re 模块,它提供 Perl 风格的正则表达式模式. re 模块使 Python 语言拥有全部的正则表达式功能. compile 函数根据一个模式字符串和可选的标志参 ...

  8. windows版 Sublime Text 2 快捷键

    ucifr 翻译了 Sublime Text 2 快捷键 Mac版,用win系统的哥们表示伤不起啊~ 今天把windows版 Sublime Text 2 快捷键 整理了出来,与众兄弟们分享: Ctr ...

  9. 秒搭Kubernetes之使用Rancher

    Rancher 在接触Docker和K8s的前阶段就耳闻目睹到Rancher,但是没有进一步接触过.直到将K8s搭建完成.才进一步了学习与实践Rancher. Rancher是简便易用的容器管理.其中 ...

  10. <USACO09FEB>庙会捷运Fair Shuttleの思路

    一个没有被我成功证明的 贪心 但是 ac了的 别人排序都是排终点.但我的排终点错了emm排起点才对qvq 有没有人友情看看怎么证(没有 #include<cstdio> #include& ...