How to call php script using AJAX

Question

I don't quite understand how ajax works, esp the "data" on it. I know what to put in url and type but on data I have no idea what to put there and what's is data on AJAX.

I want to fetch data on my database using AJAX, by calling php script using AJAX. I want to get dates that is fully booked and disable it on the datepicker plugin I used.

<script type="text/javascript">

       let picker = new Lightpick({
       field: document.getElementById('lightpick-datepicker'),
       minDate: new Date(),
       disableWeekends: true
   });

   let disabledDates = // here ajax request to fetch unavailable dates as array. 
   // for example fetch data has returned that array: 
   // [
   //    ['2019-02-05', '2019-02-11'],
   //    ['2019-02-14', '2019-02-16']
   // ]

   // set to picker unavailable dates
   picker.setDisableDates(disabledDates);

</script>

this is my code above and this how I think how this code should work or am i wrong? I just dont know what to put there and how does AJAX works.

If ever someone actually solve/help me on this, Can you please explain oh how calling php script ajax works? because I might use this "calling php script using AJAX" often on my project.

I tried search about this call php script using AJAX thing. But they explain poorly on how it works they only give codes though the codes they give doesn't solve my problem.

Tried this code::

<script type="text/javascript">

       let picker = new Lightpick({
       field: document.getElementById('lightpick-datepicker'),
       minDate: new Date(),
       disableWeekends: true
   });

   let disabledDates = ({
        $.ajax({

            url: '/action/get_dates.php';
            type: 'POST';
            data: {} // i dont know that to put here

        });
   )};

   // set to picker unavailable dates
   picker.setDisableDates(disabledDates);

</script>

Answer 1

I recommend using fetch() function or JQuery's $.ajax().

fetch(`http://${SERVER_IP}:${SERVER_PORT}/${filename}`, {
    method: "GET",
}).then(resp => response.json())
  .then(respBody => picker.setDisableDates(respBody))

Let me explain:

The first parameter for fetch function is the url to your php script. Assuming that your server runs on the same computer as your client (the browser) then SERVER_IP = 'localhost'. Assuming that you use an apache server, then most probably SERVER_PORT = 8080. filename = yourphpscriptname.php.

The second parameter is the options parameter. You should provide the method used in your AJAX call ("GET" | "POST" | "PUT" | "DELETE" | ... ). If none provided, then I guess "GET" will be taken by default.

AJAX calls are asynchronous, meaning that if you have

var a = 10;
fetch(`http://${SERVER_IP}:${SERVER_PORT}/${filename}`, {
    method: "GET",
}).then(respBody => a++)
//will print '10'
console.log(a);

the output will be most probably 10, because the first line of code after your fetch() will be executed before the response has come from server. The code that you want to be executed when the response is received needs to be put in then().

response.json() extracts the response body from the http request and converts it from json into a JavaScript object.

Also, check browser compatibility for fetch() function here.

But they explain poorly on how it works they only give codes though the codes they give doesn't solve my problem.

If my answer doesn't help you, then you need to explain more clearly what kind of problem are you facing.

Answer 2

Hi you can do it this way:

first your ajax :

    var id = 1;

    $.ajax({
        method: "POST",
        url: "../script/script.php",
        data: { action: "SLC", id: id}
      }).done(function(response){
console.log(response);
})

your php script:

 if (isset($_POST["action"])) {
        $action = $_POST["action"];
        switch ($action) {
            case 'SLC':
                if (isset($_POST["id"])) {
                    $id = $_POST["id"];
                    if (is_int($id)) {
                        echo "is an integer";
                    }
                }
                break;

        }
    }

Where action is a command you want to do SLC, UPD, DEL etc and id is a parameter, if you want to work with json use echo json_encode($data) instead

Hope it helps