JavaScript Jquery Ajax请求过程中常见数据处理场景小结

Question

 

小结目录：

 

        1、页面加载成功后，自动请求加载对应的函数方法
        2、ajax函数方法封装，供其他方法调用
        3、ajax请求值返回json或map，list<map>等取值示例
        4、Jquery id定位获取input标签的输入值
        5、Jquery id定位清空内容，并添加字符串
        6、Js Dict字段定义
        7、Js Dict字典取值
        8、Js 获取当前时间，并计算前7天，后1天
        9、Js 遍历字典数组 list[dict]并取值
        10、Js 按钮绑定点击clicke事件

 

 

1、页面加载成功后，自动请求加载对应的函数方法

$(function () {
    getAllCountIp();
    getAllCountLogName();
    getAllCountLogContent();
});

 

 

2、ajax函数方法封装，供其他方法调用

function getAllCountIp(){
    $.ajax({
        type:"post",
        url:"/benjamin/getAllCountIp",
        // data:{
        //     cardno:cardno,
        // },
        async:false,
        success:function(msg){
            console.log(msg);
            $("#getAllCountIp").append(msg.all_count_ip);
        }
    });
};

 

 

3、ajax请求值返回json或map，list<map>等取值示例

json或map数据

{
    all_count_ip: 3637
}

js取值map

$.ajax({
    type:"post",
    url:"/benjamin/getAllCountIp",
    // data:{
    //     cardno:cardno,
    // },
    async:false,
    success:function(msg){
        console.log(msg);
        $("#getAllCountIp").append(msg.all_count_ip);
    }
});

list<map>

[
    {
    name: "进入主页",
    value: 1160
    },
    {
    name: "Python",
    value: 167
    },
    ……
]

ajax js取值list<map>

$.ajax({
    type:"post",
    url:"/benjamin/getAllCountLogName",
    async:false,
    success:function(msg){
        msg = msg.slice(0,10)
        data_name = []
        data_value = []
        for (const key in msg) {
            data_name.push(msg[key].name),
            data_value.push(msg[key].value)
        }
    }
});

 

 

4、Jquery id定位获取input标签的输入值

begin = $("#begin").val();
end = $("#end").val();

 

 

5、Jquery id定位清空内容，并添加字符串

$("#getDayCountIP").empty();
$("#getDayCountIP").append("该时间段独立IP总访问人数: " + msg.day_count_ip);

 

 

6、Js Dict字段定义

var result = {}
result["begin"] = begin;
result["end"] = end;

 

 

7、Js Dict字典取值

var getDayDict = getDayDict();
var begin = getDayDict["begin"]
var end = getDayDict["end"]

 

8、Js 获取当前时间，并计算前7天，后1天

var myDate = new Date;
// 默认前7天
var beginDate = new Date(myDate.getTime() - 7*24*60*60*1000);
var endDate = new Date(myDate.getTime() + 24*60*60*1000);

var beginMonth = beginDate.getMonth() + 1;
var endMonth = endDate.getMonth() + 1;

var begin = beginDate.getFullYear() + "-" + beginMonth + "-" + beginDate.getDate();
var end = endDate.getFullYear() + "-" + endMonth + "-" + endDate.getDate();

 

 

9、Js 遍历字典数组 list[dict]并取值

 

json数据源演示

[
    {
    name: "进入主页",
    value: 1160
    },
    {
    name: "Python",
    value: 167
    },
    ……
]

js代码示例 截取数组前10个，然后分别取值数组中字典的name、value分别插入新的数组中

msg = msg.slice(0,10)
data_name = []
data_value = []
for (const key in msg) {
    data_name.push(msg[key].name),
    data_value.push(msg[key].value)
}

 

 

10、Js 按钮绑定点击clicke事件

$("#subbtn").click(function () {
    begin = $("#begin").val();
    end = $("#end").val();
    getDayCountIP();
    getEveryDayIP();
    getDayCountLogName();
    getDayCountLogContent();
});

Answer 1

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 请看👉 ：JavaScript Jquery Ajax请求过程中常见数据处理场景小结

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 以帮助更多的人 ^-^