如何使用AJAX将值传递到数据库中

Question

I'm trying to pass certain values into a database using AJAX. With the current script I have, the PHP checks for the submit button post and processes the form. It's a standard form entry into a database, but that's not the issue, I have elements in my form that aren't form values, it's text within a div that I'm trying to pass into the database using AJAX and I'm not entirely sure how to go about doing this. I don't need help with the PHP, which is why I'm not posting it, I just need help doing the AJAX to get the selected values and passing them into the database.

var Alerts = {
        apu: [["APU Power Fail", "APU[1]"], ["APU Power Fault", "APU[2]"], ["APU Generator Fail", "APU[3]"], ["APU High Oil Temperature", "APU[4]"], ["APU Hot Start", "APU[5]"], ["APU Loss Overspeed Protection", "APU[6]"], ["APU Starter Engaged", "APU[7]"], ["APU Fire", "APU[8]"], ["APU Fails Bite Check", "APU[9]"], ["APU Door Fails to Open", "APU[10]"], ["APU No Flame", "APU[11]"], ["Left Fire Bottle Discharge", "APU[12]"]],

        avionics: [["ADS 1 Fail", "AVIONICS[1]"], ["ADS 2 Fail", "AVIONICS[2]"], ["ADS 3 Fail", "AVIONICS[3]"], ["AP 1 Fail", "AVIONICS[4]"], ["AP 2 Fail", "AVIONICS[5]"], ["Autopilots Fail", "AVIONICS[6]"], ["Baroset 1 Fail", "AVIONICS[7]"], ["Baroset 2 Fail", "AVIONICS[8]"], ["Baroset 3 Fail", "AVIONICS[9]"], ["CCD 1 Fail", "AVIONICS[10]"], ["CCD  2 Fail", "AVIONICS[11]"], ["Heading Comparison Monitor", "AVIONICS[12]"], ["Heading and Roll Comparison Monitor", "AVIONICS[13]"], ["Display Controller 1 Fail", "AVIONICS[14]"], ["Display Controller 2 Fail", "AVIONICS[15]"], ["IRS 1 Fail", "AVIONICS[16]"], ["IRS 2 Fail", "AVIONICS[17]"], ["IRS 3 Fail", "AVIONICS[18]"], ["Glideslope Antenna Fail", "AVIONICS[19]"], ["MAU 1A Fail", "AVIONICS[20]"], ["MAU 1B Fail", "AVIONICS[21]"], ["MAU 2A Fail", "AVIONICS[22]"], ["MAU 2B Fail", "AVIONICS[23]"], ["MAU 3A Fail", "AVIONICS[24]"], ["MAU 3B Fail", "AVIONICS[25]"], ["MRC 1 Fail", "AVIONICS[26]"], ["MRC 2 Fail", "AVIONICS[27]"], ["GPS Degrade", "AVIONICS[28]"], ["GPS #1 Fail", "AVIONICS[28]"], ["GPS #2 Fail", "AVIONICS[30]"], ["Display Unit 1 Fail", "AVIONICS[31]"], ["Display Unit 2 Fail", "AVIONICS[32]"], ["Display Unit 3 Fail", "AVIONICS[33]"], ["Display Unit 4 Fail", "AVIONICS[34]"], ["GPS - Unable RNP", "AVIONICS[35]"]]
    }
    var description, breaker;
    for(var key in Alerts){
        var system = key.toUpperCase();
        $("#systems").append("<div class='systems' id='" +key +"'><div class='select_box'></div><h2>" +system +"</h2></div>");
    }
    $("#systems").on("click", ".systems", function(){
        $("#malfunctions").children().remove();
        $(this).find(".select_box").each(function(){
            $(".selected").removeClass("selected");
            $(this).addClass("selected");
        })
        $.each(Alerts[this.id], function(ind,item){
            description = item[0];
            breaker = item[1];
            $("#malfunctions").append("<div class='systems'><div class='select_box'></div><p data-id='" +description +"'>" +description +"</p></div>");
        })
    })
    $("#malfunctions").on("click", ".systems", function(){
        $(this).find(".select_box").each(function(){
            if($(this).hasClass("selected")){
                $(this).removeClass("selected");
            }
            else{
                $(this).addClass("selected");
                var text = $(this).closest(".systems").text();
            }
        })
    })

The divs on the right with the red box showing are the selected items that I want to pass into the database.

Answer 1

You need to loop through your elements and set its text into an array then you can pass the data via an object and handle it easily via PHP POST as an array of values:

jQuery(document).ready(function($) {

  var data_values = [];

  $("#malfunctions > .selected").each(function(index, el) {
     data_values[index] = el.innerText;
  });

  $.ajax({
     url: '/path/to/file',
     type: 'POST',
     dataType: 'json',
     data: {myData: data_values}
  })
});