Question

我有一个数据库，里面有一张桌子表有公司和时间列，还有一些，但这两个很重要因此，用户通过填写表格进行预约在形式上，我有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，都可以返回任何可用的约会。你的变量名对我来说没什么意义，所以试着去理解下面代码的作用。

$.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/

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

2 个答案:

修改