在AJAX调用中返回html表单字段

Return html form field on AJAX call

本文关键字：html 表单 字段 返回 AJAX 调用      更新时间：2023-09-26

当用户输入时，我需要创建带有动态标签的动态字段，更明确地说：

我要求用户选择一个日期范围，并根据该日期范围为每个日期创建标签和输入字段

为此，我所做的是在输入表单字段的更改事件上调用AJAX函数，并根据php函数和echo中的输入i过程将模板添加到页面上，并将其附加到表单上，如下面的

$('#setdates').click(function() {
startDate = document.getElementById('event-start_date').value;
endDate = document.getElementById('event-end_date').value;
$.ajax({
    url: "showtimings",
    type: 'POST',
    data:{
        'startdate': startDate,
        'enddate': endDate,
    },
    success: function(result){
    $("#optionTemplate").html(result);
  }});
});

下面只是我根据输入从函数返回的内容的模板。此模板乘以用户输入的时间

 <div class="row">
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
        <label>Date is Dynamic</label>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-4">
        <select class="form-control" id="starttime0">
            <option>00:00</option>
            <option>01:00</option>
            <option>02:00</option>
            <option>03:00</option>
            <option>04:00</option>
        </select>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-4">
        <select class="form-control" id="starttime0">
            <option>00:00</option>
            <option>01:00</option>
            <option>02:00</option>
            <option>03:00</option>
            <option>04:00</option>
        </select>
    </div>
</div>

然后根据，我从php函数中回显html模板，并将其附加到页面上。

我想知道这是一个好的做法，还是有其他方法可以让它更有效率？

即使是现在，返回数据并将其附加到表单也需要很长时间，所以我认为这是因为对函数的调用。有没有其他方法可以让它快速处理？

[edit]

这是一个版本，由自己生成（在香草JS中）一组字段。我不完全知道你的需求，所以你必须调整它才能得到你想要的

    function genTemplate(startDate, endDate) {
        var buffer = '';
        startDate = new Date(startDate).getTime();
        endDate = new Date(endDate).getTime();
        day = new Date(startDate);
        var timediff = endDate - startDate;
        nbDay = Math.floor(timediff / (1000*60*60*24));
        var i;
        for(i = 0; i < nbDay; i++) {
           day.setDate(day.getDate() + 1);
           buffer = buffer +
            '<div class="row">'+
                '<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">'+
                    '<label>'+day.toDateString()+'</label>'+
                '</div>'+
                '<div class="col-lg-2 col-md-2 col-sm-2 col-xs-4">'+
                    '<select class="form-control" id="starttime0">'+
                        '<option>00:00</option>'+
                        '<option>01:00</option>'+
                        '<option>02:00</option>'+
                        '<option>03:00</option>'+
                        '<option>04:00</option>'+
                    '</select>'+
                '</div>'+
                '<div class="col-lg-2 col-md-2 col-sm-2 col-xs-4">'+
                    '<select class="form-control" id="starttime0">'+
                        '<option>00:00</option>'+
                        '<option>01:00</option>'+
                        '<option>02:00</option>'+
                        '<option>03:00</option>'+
                        '<option>04:00</option>'+
                    '</select>'+
                '</div>'+
            '</div>';
        }
        return buffer;
    }
    
    function f() {
        startDate = document.getElementById('event-start_date').value;
        endDate = document.getElementById('event-end_date').value;
    
        optionTemplate = document.getElementById("optionTemplate");
        optionTemplate.innerHTML = genTemplate(startDate, endDate);
    }
start <input id="event-start_date" value="2015-11-10"><br>
end <input id="event-end_date" value="2015-11-15"><br>
<button onclick="f()">Run</button><br>
<hr>
<div id="optionTemplate">
</div>

相关文章：