Senden von Formularstringdaten und Bilddaten in einem einzigen Ajax-Aufruf

Question

Wie können Sie zwei Ajax-Aufrufe zusammenführen, so dass sie Formular-Eingabedaten sowie Formularbilddaten mit der API formData übergeben?

Ansicht Ajax Anrufe:

$("#submitbmsymptom").click(function(h){ 
    h.preventDefault(); 
    var radioValue; 
    $('#radio1, #radio2, #radio3, #radio4').each(function(){ 
     if($(this).is(':checked')){ 
      radioValue = $(this).val(); 
     } 
    }); 

    console.log(radioValue + 
    $("#bmdate").val() + 
    $("#bmtime").val() + 
    $("#bmscale").val() + 
    $("#bmpainlevel").val() + 
    $("#bmobs").val() 
    ); 

    $.ajax({ 
     url:'urllocation', 
     method: 'POST', 
      data:{ 
       bmdate_data : $("#bmdate").val(), 
       bmtime_data : $("#bmtime").val(), 
       bmscale_data : $("#bmscale").val(), 
       bmcontents_data : radioValue, 
       bmpainlevel_data : $("#bmpainlevel").val(), 
       bmobs_data : $("#bmobs").val(), 
      }, 
     } 
     ).done(function(regresult){ 

    }); 
}) 

$("#submitbmsymptom").click(function(h){ 
    h.preventDefault(); 

    var pooPicture = $('input[name=poopic]'); 
    var fileUpload = pooPicture[0].files[0]; 

    var formData = new FormData(); 
    formData.append("file", fileUpload); 

    $.ajax({ 
     url:'urllocation', 
     method: 'POST', 
     data: formData, 
     processData: false, 
     contentType: false, 
     success: function() { 
      alert("File uploaded"); 
     } 
    }); 
}) 

Controller-Methode, die Daten empfängt, speichert die Datei auf dem Server und fügt dann die String-Daten und Dateinamen in eine Datenbank ein assoziatives Array mit:

function bowelmovements(){ 
    $bmuserid = $this->session->userdata('id'); 
    $bmsymptomdate = $this->input->post('bmdate_data'); 
    $bmsymptomtime = $this->input->post('bmtime_data'); 
    $bmsymptomtype = $this->input->post('bmscale_data'); 
    $bmsymptomlocation = $this->input->post('bmcontents_data'); 
    $bmsymptompainlevel = $this->input->post('bmpainlevel_data'); 
    $bmsymptomobs = $this->input->post('bmobs_data'); 

    $config['upload_path'] = APPPATH.'/assets/uploads/'; 
    $config['allowed_types'] = "gif|jpg|png|mp4"; 

    $this->load->library('upload', $config); 
    if($this->upload->do_upload("file")){ 
     $imageData = $this->upload->data(); 
     $fileName = $imageData[file_name]; 
     $bmdata = array(
      'userid' => $bmuserid, 
      'bmdate' => $bmsymptomdate , 
      'bmtime' => $bmsymptomtime, 
      'bmscale' => $bmsymptomtype, 
      'bmcontents' => $bmsymptomlocation , 
      'bmpainlevel' => $bmsymptompainlevel, 
      'bmobs' => $bmsymptomobs, 
      'bmimage' => $fileName 
     ); 

    $insertBM = $this->poomonitormodel->insertBM($bmdata); 
    } 
    else{ 
     echo "File not uploaded"; 
    } 

} 

Momentan wird nur der zweite Ajax-Aufruf gesendet und nur der Dateiname in die Datenbank eingefügt. Ich benötige jedoch beide Datensätze, um sie in die Tabelle zu übertragen.

Danke.

Answer 1

Hier habe ich Ihre 2 Ajax-Aufrufe zu einem einzigen kondensiert:

$("#submitbmsymptom").click(function(h){ 
    h.preventDefault(); 
    var radioValue; 
    $('#radio1, #radio2, #radio3, #radio4').each(function(){ 
     if($(this).is(':checked')){ 
      radioValue = $(this).val(); 
     } 
    }); 

    var pooPicture = $('input[name=poopic]'); 
    var fileUpload = pooPicture[0].files[0]; 

    var formData = new FormData(); 
    formData.append("file", fileUpload); 
    formData.append("bmdate_data", $("#bmdate").val()); 
    formData.append("bmtime_data", $("#bmtime").val()); 
    formData.append("bmscale_data", $("#bmscale").val()); 
    formData.append("bmcontents_data", radioValue); 
    formData.append("bmpainlevel_data", $("#bmpainlevel").val()); 
    formData.append("bmobs_data", $("#bmobs").val()); 

    $.ajax({ 
     url:'urllocation', 
     method: 'POST', 
     processData: false, 
     contentType: false, 
     data: formData, 
    }).done(function(regresult){ 

    }); 
});