對AJAX調用

Question

我有要求時，用戶給出的輸入來創建動態標籤動態場返回HTML表單字段，要更加明確：

我要求用戶選擇日期範圍，並根據該日期範圍我想創建標籤和輸入框的每一個日期

---

對於我所做的就是要呼籲根據輸入我的php功能和echo模板處理輸入表單域的變化情況和AJAX功能到頁面和將它附加到下面的表格中

$('#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模板，並將其連接到該頁面。

我想知道這是一種很好的做法還是有其他方法可以使其更有效？

即使現在它需要大量的時間來返回數據並將其附加到表單，所以我認爲它是因爲調用函數。有沒有其他方法可以快速處理？

Answer 1

這是一個由他自己（在香草JS）gen一組字段的版本。我並不確切地知道你的需要，那麼你必須調整它來得到你想要的

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>