Proper way of doing AJAX request to retrieve data from database

Question

I got a database with one table in it.
Table has Company and Time columns, and some more, but these two are important.
So the user makes an appointment through the filling of the form.
In the form I have 2 <select>s - Company And Time, so he chooses both from the selections.
He clicks a button and the form is stored in the database.
How do I use AJAX to retrieve all the hours(Time) that are in use, and then disable them accordingly.
For example: I made the appointment selected Nokia from Companies and 9:30 from Time dropdowns. Now You want to make the appointment with Nokia but the 9:30 time is disabled because it has already been used.
What would be the correct way to use AJAX for this:
this is my structure

 function MakeApp() {

        var AppWith = $("#CompanySelect").val();
        var AppTime = $("#TimeSelect").val();
        var Yritys = $("#YritysNtext").val();
        var Henkilonimi = $("#HenkilonimiText").val();
        var Asema = $("#AsemaText").val();
        var PuhelinNR = $("#PuhelinText").val();
        var EMail = $("#EMailText").val();
        var Keskustelun = $("#KeskustelunText").val();
        var app = { AppWithYritys: AppWith, AppTime: AppTime, YritysN: Yritys, Henkilonimi: Henkilonimi, Asema: Asema, PuhelinNR: PuhelinNR, EMail: EMail, Keskustelun: Keskustelun }

        var request = $.ajax({
            type: "POST",
            data: JSON.stringify(app),
            url: "/api/Appointments",
            contentType: "application/json",
            dataType: "html"
        });
        request.done(function (podaci) {
            if (podaci != -1) {
                alert("You Have successfully made an appointment");
                location.assign("BookAppointment.html");
            }
            else {
                $("#p1").html("Greska pri unosu");
            }
        });

        request.fail(function (gr) {
            $("#p1").html(gr.statusText);
        });
    };

Answer 1

Actually it's your server job to manage data and database. AJAX is only a way to send information to a server aysnchronously. What you could do, is when you load the page, you retrieve only the occupied time with AJAX, you disable their options in your select, and whenever your server receive an request, it checks if there is an available place for the company and times.

I'm sorry i don't have a code for your since I think it's pretty clear. If it's not, feel free to comment, i'll try to help you the best i can.

Edit

Here I have a few lines of code, it's not complete since we are missing a few informations but it is the main algorythm.

Your server:

{GET}
public void getUnavailable() {
    //get all times from Databases for today's date., 
    //Encode them in JSON.
    //returns the times.
}

Lets assume that your JSON looks like this:

[
{
    "company": "Nokia",
    "times": [
        "9:30",
        "10:00",
        "10:30"
    ]
}
]

You need to retrieve your JSON and parse it to disable the time in the selected select:

$(document).ready(function(){
$.ajax({
    'url': API_URL + 'event/getUnavailable',
    'method': 'GET',
    'success': function(data) {
        $.each(data.data, function($index, $company){
            var select = /* .. Get the Select of the current company .. */
            $.each($company.times, function($index, $times){
                select./*.. Find the time associate with $time .. */.setDisable(true); // I don't know if setDisable is the correct function, you might want to check this out.
            })
        })
    },
    'error': function(error) {
        console.error(error.data);
    }
});

$('.myForm').submit(function(){
    // This is where you submit your data to your server.
    $.ajax({
        'url': API_URL + "event/create",
        'method': 'POST',
        'data': /* your data */,
        'success': function(){
            console.log('success');
        },
        'error': function(error) {
            console.error(error);
        }
    })
});
})

This is the most I can do with the info I have.

Answer 2

The real way to handle this, is whatever web technology you have behind /api/Appointments, is to return whatever appointments are available. Your variable names don't make much sense to me, so try to understand what the code below does.

$.get( "/api/Appointments", JSON.stringify(app) )
  .done(function( data ) {
    //note that the "data" variable holds your returned appointments
    //I would return a json document of available appointment times to filter your select


    //sample json would look something like this
    // { "availableAppointments": ["9:30 AM", "10:00 AM"] }


    // and then iterate through available appointments and populate your select
    for(var i = 0; i < data.availableAppointments.length; i++){
         $('#yourSelectId').append($('<option>', {
           value: 930,
           text: data.availableAppointments[i]
         }));
    }

  });

Please note this code may not be syntactically correct.

Here are some links that helped me answer this for you, in case they might help.

Adding options to a <select> using jQuery?

https://api.jquery.com/jquery.get/