格式化ajax成功数据数组

时间:2019-12-09 15:01:49

标签: javascript php html ajax laravel

我想格式化从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("-");
}
});

console.log输出

enter image description here

我想更改状态的按钮根据ajax结果禁用(如上图所示)

`                                                               上午08:00                                                                                            上午08:30                                                                                            上午09:00                                                                                            上午09:30                                                                                            10:00 AM                                                                                            上午10:30                                                                                            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改变按钮状态。 请帮我。预先感谢。

1 个答案:

答案 0 :(得分:0)

1要禁用“提交”按钮,只需向“提交”按钮添加禁用的属性。

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

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

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

在您的代码中:

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