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

Question

I have datepicker and I have specific days which I set with array..it's okey so far but I want to set these days with json and my question is how to request from server and then put into when I focus datepicker?

if you click my datepicker you will see my specific days (with green and red colors)

I shared my specific days end of the snippet

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

and I can get these days with jquery as below..but I don't have any idea how can apply to my datepicker tor request

 $(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 Demo

Answer 1

if you want to get some data from the server, you need to do an Ajax call (with application/json result type)

You can check the jquery ajax function in more details : http://api.jquery.com/jquery.ajax/

Answer 2

Read about ajax requests with jquery. Something like this (make request, get data, loop through it, and append to body):

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

at start try get json data and display it in console. good luck:)