执行 AJAX 请求以从数据库中检索数据的正确方法

Question

我有一个数据库，里面有一张表。
表有 Company 和 Time 列，还有更多，但这两个很重要。
所以用户通过填写​​表格进行预约。
在表格中我有 2 <select>s - 公司和时间，所以他从选项中选择了这两个。
他单击一个按钮，表格就存储在数据库中。
如何使用 AJAX 检索所有正在使用的小时（时间），然后相应地禁用它们。
例如：我从公司中选择了诺基亚，从时间下拉列表中选择了 9:30。现在您想与诺基亚预约，但 9:30 时间已被禁用，因为它已被使用。
为此使用 AJAX 的正确方法是什么：
这是我的结构

 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

实际上，管理数据和数据库是您的服务器工作。 AJAX 只是一种将信息异步发送到服务器的方法。你可以做的是，当你加载页面时，你只用 AJAX 检索占用的时间，你在你的选择中禁用它们的选项，并且每当你的服务器收到请求时，它会检查公司和时间是否有可用的地方.

很抱歉，我没有您的代码，因为我认为它很清楚。如果不是，请随时发表评论，我会尽力帮助您。

编辑

这里我有几行代码，它不完整，因为我们缺少一些信息，但它是主要的算法。

你的服务器：

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

假设您的 JSON 如下所示：

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

您需要检索您的 JSON 并对其进行解析以禁用所选 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);
        }
    })
});
})

这是我能用我所拥有的信息做的最多的事情。

Answer 2

处理这个问题的真正方法是，无论您在 /api/Appointments 后面使用什么 Web 技术，都可以返回任何可用的约会。你的变量名对我来说没有多大意义，所以试着理解下面的代码是做什么的。

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

  });

请注意此代码在语法上可能不正确。

这里有一些链接可以帮助我为你解答这个问题，以防万一。

Adding options to a <select> using jQuery?

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