Ajax定时刷新局部控件数据

最新推荐文章于 2024-06-28 16:55:27 发布

The_Caibe

最新推荐文章于 2024-06-28 16:55:27 发布

阅读量103

点赞数 3

文章标签： ajax okhttp 前端

本文链接：https://blog.csdn.net/Nty268/article/details/125086531

版权

window.onload = function () {
	// 页面小时钟案例：id为show_time的控件每0.5s显示实时的 时分秒数据
    var showtime = document.getElementById("show_time");
    var timer0 = setInterval(function () {
        var now = new Date();
        showtime.innerText = now.toString().substr(16, 9);
    }, 500);
    // 实际案例：
    // 创建get_data()函数
    var get_data = function () {
        var url = "/ruiqiu/get_zrztzs";         // 请求路由
        var data = {type: $("#data2").text()};  //请求数据为 id="data2" 控件的文本值
        $.ajax({                                //发送ajax请求
            type: "get",                        //请求方式，post请求需设置CSFR
            async: false,                       //同步请求
            url: url,
            data: data,
            timeout: 1000,
            success: function (datas) {         //成功接收返回的数据存入datas中
                //alert(dates);
                $("#znum").text(datas.znum);//要刷新的div
                $("#dnum").text(datas.dnum);//要刷新的div
                n = 100 - parseFloat(datas.val)
                $("#cover1").css("height", n + "%")
                $("#data2").text(datas.val);//要刷新的div
            },
            error: function () {
                console.log("失败，请稍后再试！");
            }
        })
    }
    get_data();  //在定时器之前，可以先执行一遍函数获取数据
    var timer = setInterval(function () {
        var newDate2 = new Date();
        var second2 = newDate2.toString().substr(22, 2);
        if (parseFloat(second2) % 30 === 0) {
            var url = "/ruiqiu/get_zrztzs";
            var data = {type: $("#data2").text()};
            $.ajax({
                type: "get",
                async: false,  //同步请求
                url: url,
                data: data,
                timeout: 1000,
                success: function (datas) {
                    //alert(dates);
                    $("#znum").text(datas.znum);//要刷新的div
                    $("#dnum").text(datas.dnum);//要刷新的div
                    n = 100 - parseFloat(datas.val)
                    $("#cover1").css("height", n + "%")
                    $("#data2").text(datas.val);//要刷新的div
                },
                error: function () {
                    console.log("失败，请稍后再试！");
                }
            })
        }
    }, 1000);
}