时间戳

首页 > 解决方案 > 格式化ajax成功数组数据

javascript - 格式化ajax成功数组数据

问题描述

我想格式化从 ajax 请求返回的数据，以将按钮的状态更改为禁用。当有人从日期选择器中选择日期时发送请求。

它返回数据对象数组，包括时间作为字符串。我想检查每个时间值并禁用具有相关时间的按钮。我使用了引导单选切换按钮组。

我如何通过读取 ajax 检索数组来做到这一点？

这是我的ajax代码，

    const $datepicker = $('#date').datepicker({
    format: 'yyyy-mm-dd'
    });

    $datepicker.on('changeDate', function(e) {            
    $.ajax({
    type: "POST",
    url: '/process_date',
    data: {
        date: convert(e.date.toString()),
    },
    success: function(result) {
       console.log(result);
    },
    error: function (error) {
        console.log(error);
    }
});

function convert(str) {
    var date = new Date(str),
        month = ("0" + (date.getMonth()+1)).slice(-2),
        day  = ("0" + date.getDate()).slice(-2);
    return [ date.getFullYear(), month, day ].join("-");
}
});

控制台日志输出

在此处输入图像描述

我想根据ajax结果禁用状态的按钮（如上图）

` 08:00 am 08:30 am 09:00 am 09:30 am 10:00 am 10:30 am 11:00 am 

                        <label class="btn btn-outline-primary">
                            <input type="radio" name="timebtn" id="8" autocomplete="off" value="11:30AM"> 11:30 am
                        </label>
                        <label class="btn btn-outline-primary">
                            <input type="radio" name="timebtn" id="9" autocomplete="off" value="12:00AM"> 12:00 am
                        </label>
                        <label class="btn btn-outline-primary">
                            <input type="radio" name="timebtn" id="10" autocomplete="off" value="12:30PM"> 12:30 pm
                        </label>
                        <label class="btn btn-outline-primary">
                            <input type="radio" name="timebtn" id="11" autocomplete="off" value="11:00PM"> 01:00 pm
                        </label>
                        <label class="btn btn-outline-primary">
                            <input type="radio" name="timebtn" id="12" autocomplete="off" value="01:30PM"> 01:30 pm
                        </label>
                        <label class="btn btn-outline-primary">
                            <input type="radio" name="timebtn" id="13" autocomplete="off" value="02:00PM"> 02:00 pm
                        </label>
                        <label class="btn btn-outline-primary">
                            <input type="radio" name="timebtn" id="14" autocomplete="off" value="02:30PM"> 02:30 pm
                        </label>

                        <label class="btn btn-outline-primary">
                            <input type="radio" name="timebtn" id="15" autocomplete="off" value="03:00PM"> 03:00 pm
                        </label>
                        <label class="btn btn-outline-primary">
                            <input type="radio" name="timebtn" id="16" autocomplete="off" value="03:30PM"> 03:30 pm
                        </label>
                        <label class="btn btn-outline-primary">
                            <input type="radio" name="timebtn" id="17" autocomplete="off" value="04:00PM"> 04:00 pm
                        </label>
                        <label class="btn btn-outline-primary">
                            <input type="radio" name="timebtn" id="18" autocomplete="off" value="04:30PM"> 04:30 pm
                        </label>
                        <label class="btn btn-outline-primary">
                            <input type="radio" name="timebtn" id="19" autocomplete="off" value="05:00PM"> 05:00 pm
                        </label>
                        <label class="btn btn-outline-primary">
                            <input type="radio" name="timebtn" id="20" autocomplete="off" value="05:30PM"> 05:30 pm
                        </label>
                        <label class="btn btn-outline-primary">
                            <input type="radio" name="timebtn" id="21" autocomplete="off" value="06:00PM"> 06:00 pm
                        </label>
                        <label class="btn btn-outline-primary">
                            <input type="radio" name="timebtn" id="22" autocomplete="off" value="06:30PM"> 06:30 pm
                        </label>
                        <label class="btn btn-outline-primary">
                            <input type="radio" name="timebtn" id="23" autocomplete="off" value="07:00PM"> 07:00 pm
                        </label>
                        <label class="btn btn-outline-primary">
                            <input type="radio" name="timebtn" id="24" autocomplete="off" value="07:30PM"> 07:30 pm
                        </label>
                        <label class="btn btn-outline-primary">
                            <input type="radio" name="timebtn" id="25" autocomplete="off" value="08:00PM"> 08:00 pm
                        </label>
                        <label class="btn btn-outline-primary">
                            <input type="radio" name="timebtn" id="26" autocomplete="off" value="08:30PM"> 08:30 pm
                        </label>
                </div>
            </div>`

我也想知道，如何使用 jquery 更改按钮状态。请帮我。提前致谢。

标签： javascriptphphtmlajaxlaravel

解决方案

1 要禁用提交按钮，您只需为提交按钮添加禁用属性。

$("#button").attr("disabled", true);

2 要启用禁用的按钮，请将 disabled 属性设置为 false，或删除 disabled 属性。

$('#button').attr("disabled", false);   
or
$('#button').removeAttr("disabled");

在您的代码中：

 success: function(result) {
   console.log(result);
   $("#1").attr("disabled", true); // button 1 disable
}

推荐阅读