使用 php 文件中的 ajax+jquery 将一组数字更新为 html 标签

Question

我正在尝试从 php 文件中获取几段代码，用于使用 ajax+jquery 更新 html 网页上的一些数字集显示我想在 html.

中显示的数字

php 文件从数据库中获取统计数字，最好是在数组中。（我已经知道怎么做了。）

我如何让 ajax 更新不同 html 标签中的数字而不刷新整个页面？

示例数字如下：

使用：13129 open:9382309 people:2932938

并且它们每隔 3 秒自动更新一次。

Answer 1

这不是触发 3 秒间隔来更新数字的最佳方式。但是为了给你一个方向，这里有一个小例子：

HTML:

<div id="use"></div>
<div id="open"></div>
<div id="people"></div>

PHP 你的 return 数据：

$data = array('use' => rand(0,50), 'open' => rand(0,1000), 'people' => rand(0,50000));
echo json_encode($data);

JS:

function updateNumbers() {
    $.ajax({
        url: 'yourfile.php',
        dataType: 'JSON',
        success: function(data) {
            $('#use').html(data.use);
            $('#open').html(data.open);
            $('#people').html(data.people);
        }
    });
}

var numberUpdate = setInterval(updateNumbers, 3000);

此代码将 return 3 个值与运行dom 生成的数字，通过 JSON 提供。我想你可以从这里开始。

编辑：为了你的颜色闪烁效果：

下载颜色插件并 link 它在 dom 中（紧跟在 jQuery 脚本标签之后）：https://github.com/edwinm/Color-animation-jQuery-plugin/blob/master/jquery.animate-colors-min.js

用法示例：

$('#use').html(data.use).css('color', '#ff0000').animate({color:#000});

这将导致以红色开始 #ff0000 并且 t运行持续到黑色 #000。

如果您只想在数字更改时闪烁文本，请将 updateNumbers 函数扩展为类似的内容：

function updateNumbers() {
    var currentUse =  !isNaN(parseInt($('#use').html())) ? parseInt($('#use').html()) : 0;
    var currentOpen = !isNaN(parseInt($('#open').html())) ? parseInt($('#open').html()) : 0;
    var currentPeople = !isNaN(parseInt($('#people').html())) ? parseInt($('#people').html()) : 0;

    $.ajax({
        url: 'yourfile.php',
        dataType: 'JSON',
        success: function(data) {
            if (currentUse != parseInt(data.use))
                $('#use').html(data.use).css('color', '#ff0000').animate({color:#000});

            if (currentOpen!= parseInt(data.open))
                $('#open').html(data.open).css('color', '#ff0000').animate({color:#000});

            if (currentPeople != parseInt(data.people))
                $('#people').html(data.people).css('color', '#ff0000').animate({color:#000});
        }
    });
}

使用 php 文件中的 ajax+jquery 将一组数字更新为 html 标签

update a set of numbers to html tags with ajax+jquery from a php file

html

ajax

jquery