文章摘要
这篇文章主要介绍了如何利用jQuery和AJAX技术从服务器获取实时数据，并通过动态更新网页元素来展示不同状态。具体来说，代码从`https://mock.mengxuegu.com/mock/624d8ce9f56fd246b02bfcaf/process/getinfo`获取数据，根据返回的状态代码`b`（1为未开始，2为申报中，3为院系审核中，4为专家审核中，5为校级审核中，6为已结束）显示相应的状态标记。例如，当`b=2`时，会显示绿色的勾选和线状图；当`b=3`时，会显示两个勾选和线状图；当`b=4`时，会显示三个勾选和线状图。这种动态反馈设计能够清晰地展示项目的进展状态。
window.onload=function() {
$(function() {
var b
//使用ajax获取api中得数据，看是那个阶段
$.ajax({
type: ‘GET’,
url: ‘https://mock.mengxuegu.com/mock/624d8ce9f56fd246b02bfcaf/process/getinfo’,
success: function(res) {
console.log(res.data[0].BatchState);
b=res.data[0].BatchState;
//利用b数据去改变状态//1未开始，2申报中，3院系审核中，4专家审核中，5校级审核中，6已结束
if (b==1) {
$(‘.cont1’).css(‘color’, ‘skyblue’)
$(‘.circle’).eq(0).css(‘background-color’, ‘skyblue’)
}
if (b==2) {
$(‘.line’).eq(0).css(‘border-color’, ‘green’)
$(‘.line’).eq(0).css(‘border-style’, ‘solid’)
$(‘.circle’).eq(0).html(‘√’)
$(‘.circle’).eq(0).css(‘background-color’, ‘green’)
$(‘.cont1’).css(‘color’, ‘green’)
$(‘.circle’).eq(1).css(‘background-color’, ‘skyblue’)
$(‘.cont2’).eq(0).css(‘color’, ‘skyblue’)
}
if (b==3) {
$(‘.circle’).eq(0).html(‘√’)
$(‘.circle’).eq(0).css(‘background-color’, ‘green’)
$(‘.circle’).eq(1).html(‘√’)
$(‘.cont2’).eq(0).css(‘color’, ‘green’)
$(‘.circle’).eq(1).css(‘background-color’, ‘green’)
$(‘.cont1’).css(‘color’, ‘green’)
$(‘.line’).eq(0).css(‘border-color’, ‘green’)
$(‘.line’).eq(1).css(‘border-color’, ‘green’)
$(‘.line’).eq(0).css(‘border-style’, ‘solid’)
$(‘.line’).eq(1).css(‘border-style’, ‘solid’)
$(‘.circle’).eq(2).css(‘background-color’, ‘skyblue’)
$(‘.cont2’).eq(1).css(‘color’, ‘skyblue’)
}
if (b==4) {
$(‘.circle’).eq(0).html(‘√’)
$(‘.circle’).eq(0).css(‘background-color’, ‘green’)
$(‘.circle’).eq(1).html(‘√’)
$(‘.cont2’).eq(0).css(‘color’, ‘green’)
$(‘.cont2’).eq(1).css(‘color’, ‘green’)
$(‘.circle’).eq(1).css(‘background-color’, ‘green’)
$(‘.circle’).eq(2).css(‘background-color’, ‘green’)
$(‘.cont1’).css(‘color’, ‘green’)
$(‘.line’).eq(0).css(‘border-color’, ‘green’)
$(‘.line’).eq(1).css(‘border-color’, ‘green’)
$(‘.line’).eq(2).css(‘border-color’, ‘green’)
$(‘.line’).eq(0).css(‘border-style’, ‘solid’)
$(‘.line’).eq(1).css(‘border-style’, ‘solid’)
$(‘.line’).eq(2).css(‘border-style’, ‘solid’)
$(‘.circle’).eq(3).css(‘background-color’, ‘skyblue’)
$(‘.cont2’).eq(2).css(‘color’, ‘skyblue’)
}
}
})
})
}