Как экспортировать массив JavaScript в базу данных MySQL

Question

У меня есть массив в JavaScript для отображения в качестве селектора на моей веб-странице.

Теперь я хочу экспортировать этот массив в базу данных MySQL и сделать селектор на моей веб-странице редактируемым из пользовательского интерфейса.

У меня проблемы с сохранением массива в базе данных.

Большая часть поста, который я видел, использует php, мне нужно только сделать это с помощью javascript и sql.

const SEIKO = "seiko";
const WSL = "wsl";


const DATAFEED = SEIKO;


const SEIKO_EVENTS = [
    { "id": "117", "description": "117: High Jump Women U.20 Final" },
    { "id": "128", "description": "128: Javelin Throw Men U.20 Final" },
    { "id": "402", "description": "402: 100m Men Open Decathlon 1" },
    { "id": "104", "description": "104: Discus Throw Men U.20 Final" },
    { "id": "105", "description": "105: 100m Women Open S/Final" },
    { "id": "106", "description": "106: 100m Women U.20 S/Final" },
    { "id": "107", "description": "107: 100m Men U.20 S/Final" },
    { "id": "108", "description": "108: 100m Men Open S/Final" }
  
];



//list of event codes to use for the WSL XML data feed
const WSL_EVENTS = [
    { "id": "051", "description": "051: Men's Shot Put Final" },
    { "id": "052", "description": "052: Men's Discus Throw Final" },
    { "id": "053", "description": "053: Men's Javelin Throw Final" },
    { "id": "054", "description": "054: Men's Hammer Throw Final" },
    { "id": "061", "description": "061: Men's Long Jump Final" },
    { "id": "062", "description": "062: Men's Triple Jump Final" },
    { "id": "071", "description": "071: Men's High Jump Final" },
    { "id": "072", "description": "072: Men's Pole Vault Final" },
    { "id": "961", "description": "961: Men's Long Jump Decathlon" },
    { "id": "951", "description": "951: Men's Shot Put Decathlon" },
    { "id": "971", "description": "971: Men's High Jump Decathlon" }
   
];

function eventCodes() {
    //get the list of event codes based on the data feed
    if (DATAFEED === SEIKO) {
        return SEIKO_EVENTS;
    } else {
        return WSL_EVENTS;
    }

    var req = new XMLHttpRequest();

    req.addEventListener("load", loadSEIKO_EVENTS);
    req.open("POST", "/getevent/", true);
    req.send();

}


function addOptions(selector) {
    var events = eventCodes();

    //add all the items in the event codes list to the selector
    events.forEach(function(item) {
        var opt = document.createElement("option");

        //value is the event id and will be used to construct the
        //filename of the data feed file.
        opt.value = item.id;
        opt.text = item.description;

        selector.appendChild(opt);
    });
}

function init() {
    //get the selectors
    f1_selector = document.getElementById("f1_selector");
    f2_selector = document.getElementById("f2_selector");
    f3_selector = document.getElementById("f3_selector");

    //populate the selectors with our event IDs and descriptions
    addOptions(f1_selector);
    addOptions(f2_selector);
    addOptions(f3_selector);

    //get the buttons
    f1_refresh = document.getElementById("f1_refresh");
    f2_refresh = document.getElementById("f2_refresh");
    f3_refresh = document.getElementById("f3_refresh");

    //hook the click events   
    f1_selector.onclick = function() { getFile("f1", f1_selector.value); };
    f1_refresh.onclick = function() { getFile("f1", f1_selector.value); };

    f2_selector.onclick = function() { getFile("f2", f2_selector.value); };
    f2_refresh.onclick = function() { getFile("f2", f2_selector.value); };

    f3_selector.onclick = function() { getFile("f3", f3_selector.value); };
    f3_refresh.onclick = function() { getFile("f3", f3_selector.value); };

    //try to get the initial grid
    getFile("f1", f1_selector.value);
    getFile("f2", f2_selector.value);
    getFile("f3", f3_selector.value);

    //connect the WebSocket
    connect();
}

 <div id="f1" class="stats">
            <div class="selector-box">
                <select id="f1_selector" autofocus> <button id="add">Add</button>  
        </select>
                <span id="f1_refresh" style="padding-left: 5px"><button id="f1_button">Force Refresh</button></span>
                <span id="f1_status" style="float: right"></span>
            </div>
            <div>
                <span id="f1_eventstatus">&nbsp;</span>
            </div>
            <div>
                <table id="f1_grid">
                    <tr>
                        <th>Results</th>
                    </tr>
                </table>
            </div>
        </div>