如何从服务器请求json文件并放？

Question

我有datepicker，我有特定的日子，我设置了array..it＆＃39; s okey到目前为止，但我想用json设置这些天，我的问题是如何从服务器请求然后放入我的焦点datepicker？

如果您单击我的日期选择器，您将看到我的特定日期（绿色和红色）

我分享了片段的特定日期

＆＃13;

＆＃13;

$(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;
  }
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

specificdays.json

＆＃13;

＆＃13;

{
  "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"
    },
  ]
}

＆＃13;

＆＃13;

＆＃13;

我可以通过以下jquery获取这些日子..但我不知道如何应用我的datepicker tor请求

＆＃13;

＆＃13;

$(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>");
    });
  });

});

＆＃13;

＆＃13;

＆＃13;

CodePen Demo

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数据并在控制台中显示它。祝你好运：）