如何從服務器請求json文件並放置？

Question

我有datepicker，我有特定的日子，我用array ..設置了到目前為止，但是我想用json設置這些日子，我的問題是如何從服務器請求，然后在我關注datepicker時放入？

如果您單擊我的日期選擇器，您將看到我的特定日期（綠色和紅色）

我分享了片段的特定日子

 $(function() { var ilktarih = ['2017-03-23']; var sontarih = ['2017-04-10'] var bostarihler = ['2017-03-15', '2017-03-16', '2017-03-17', '2017-03-18', '2017-03-19', '2017-03-20', '2017-03-21', '2017-03-22', '2017-03-23', '2017-03-24', '2017-03-25', '2017-03-26', '2017-03-27', '2017-03-28', '2017-03-29', '2017-03-30']; var dolutarihler = ['2017-08-22', '2017-06-23', '2017-06-24', '2017-05-25', '2017-06-26', '2017-10-27', '2017-02-28', '2017-03-01', '2017-03-02', '2017-03-03', '2017-03-04', '2017-03-05', '2017-03-06', '2017-03-07', '2017-03-08', '2017-03-09', '2017-03-10', '2017-03-11', '2017-03-12', '2017-03-13', '2017-03-14']; var testtarih = ['04-04-2017', '10-04-2017']; var sstarihler = []; var dateFormat = "mm/dd/yy", from = $("#checkin").datepicker({ changeMonth: true, numberOfMonths: 2, firstDay: 1, minDate: new Date(ilktarih), maxDate: new Date(sontarih), onSelect: function(selectedDate) { var yenitarih = new Date(); var date = $(this).datepicker('getDate'); date.setTime(date.getTime() + (1000 * 60 * 60 * 24)) $("#checkout").datepicker("option", "minDate", date); }, beforeShowDay: function(date) { var y = date.getFullYear().toString(); // get full year var m = (date.getMonth() + 1).toString(); // get month. var d = date.getDate().toString(); // get Day if (m.length == 1) { m = '0' + m; } // append zero(0) if single digit if (d.length == 1) { d = '0' + d; } // append zero(0) if single digit var currDate = y + '-' + m + '-' + d; if (jQuery.inArray(currDate, dolutarihler) >= 0) { return [false, "ui-highlight"]; } if (jQuery.inArray(currDate, bostarihler) >= 0) { return [true, "ui-bos"]; } if (jQuery.inArray(currDate, sstarihler) >= 0) { return [false, "ui-ss"]; } else { return [true]; } }, isTo1: true, }).on("change", function() { to.datepicker("option", "minDate", getDate(this)); }), to = $("#checkout").datepicker({ changeMonth: true, changeYear: true, firstDay: 1, numberOfMonths: 2, minDate: new Date(ilktarih), maxDate: new Date(sontarih), onSelect: function(selectedDate) { $("#checkin").datepicker("option", "maxDate", selectedDate); }, beforeShowDay: function(date) { var y = date.getFullYear().toString(); // get full year var m = (date.getMonth() + 1).toString(); // get month. var d = date.getDate().toString(); // get Day if (m.length == 1) { m = '0' + m; } // append zero(0) if single digit if (d.length == 1) { d = '0' + d; } // append zero(0) if single digit var currDate = y + '-' + m + '-' + d; if (jQuery.inArray(currDate, dolutarihler) >= 0) { return [true, "ui-highlight-donus"]; } if (jQuery.inArray(currDate, bostarihler) >= 0) { return [true, "ui-bos"]; } if (jQuery.inArray(currDate, sstarihler) >= 0) { return [true, "ui-ss-donus"]; } else { return [true]; } } }).on("change", function() { from.datepicker("option", "maxDate", getDate(this)); }); function getDate(element) { var date; try { date = $.datepicker.parseDate(dateFormat, element.value); } catch (error) { date = null; } return date; } }); 

 .form { width: 960px; margin: 120px auto; } .form input { width: 250px; padding: 10px; } .ui-highlight .ui-state-default { background: red !important; border-color: red !important; color: white !important; cursor: no-drop; } .ui-bos .ui-state-default { background: green !important; border-color: green !important; color: white !important; } .ui-ss .ui-state-default { background: yellow !important; border-color: yellow !important; color: gray !important; cursor: help; } .ui-ss-donus .ui-state-default { background: yellow !important; border-color: yellow !important; color: gray !important; cursor: help; } .ui-highlight-donus .ui-state-default { background: red !important; border-color: red !important; color: white !important; } .ui-testtarih .ui-state-default { background: black !important; color: #FFF !important; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" /> <div class="form"> <input type="text" id="checkin" /> <input type="text" id="checkout" /> <input type="submit" value="Search" /> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 

specificdays.json

 { "ilktarih": [{ "field": "2017-03-23" }, ], "sontarih": [{ "field": "2017-04-10" }, ], "bostarih": [{ "field": "2017-03-15" }, { "field": "2017-03-16" }, { "field": "2017-03-17" }, { "field": "2017-03-19" }, { "field": "2017-03-20" }, { "field": "2017-03-21" }, { "field": "2017-03-22" }, { "field": "2017-03-22" }, { "field": "2017-03-23" }, { "field": "2017-03-24" }, { "field": "2017-03-25" }, { "field": "2017-03-26" }, { "field": "2017-03-27" }, { "field": "2017-03-28" }, { "field": "2017-03-29" }, { "field": "2017-03-30" }, ], "dolutarih": [ { "field": "2017-08-22" }, { "field": "2017-06-23" }, { "field": "2017-06-24" }, { "field": "2017-05-25" }, { "field": "2017-06-26" }, { "field": "2017-10-27" }, { "field": "2017-02-28" }, { "field": "2017-03-01" }, { "field": "2017-03-02" }, { "field": "2017-03-03" }, { "field": "2017-03-04" }, { "field": "2017-03-26" }, { "field": "2017-03-06" }, { "field": "2017-03-07" }, { "field": "2017-03-08" }, { "field": "2017-03-09" }, { "field": "2017-03-10" }, { "field": "2017-03-11" }, { "field": "2017-03-12" }, { "field": "2017-03-13" }, { "field": "2017-03-14" }, ] } 

而且我可以通過下面的jQuery來獲得這些日子..但是我不知道如何將其應用於我的日期選擇器請求

 $(document).ready(function() { $.getJSON("json_data.json", function(data) { $.each(data.ilktarih, function() { $("ul").append("<li>" + this['field'] + "</li>"); }); $.each(data.sontarih, function() { $("ul").append("<li>" + this['field'] + "</li>"); }); $.each(data.bostarih, function() { $("ul").append("<li>" + this['field'] + "</li>"); }); $.each(data.dolutarih, function() { $("ul").append("<li>" + this['field'] + "</li>"); }); }); }); 

CodePen演示

Answer 1

如果要從服務器獲取一些數據，則需要進行Ajax調用（具有application / json結果類型）

您可以檢查jquery ajax函數的更多詳細信息： http : //api.jquery.com/jquery.ajax/

Answer 2

閱讀有關jquery的ajax請求的信息。 這樣的事情（發出請求，獲取數據，循環遍歷並追加到正文）：

  $.getJSON( "ajax/test.json", function( data ) {
  var items = [];
  $.each( data, function( key, val ) {
    items.push( "<li id='" + key + "'>" + val + "</li>" );
  });

  $( "<ul/>", {
    "class": "my-new-list",
    html: items.join( "" )
  }).appendTo( "body" );
});

在開始時，嘗試獲取json數據並將其顯示在控制台中。 祝好運：）