単一のAjax呼び出しでフォーム文字列データと画像データを送信する方法

Question

formData APIを使用してフォーム入力データとフォームデータを渡すように、2つのAjax呼び出しをマージするにはどうすればよいですか？

ビューAJAX呼び出し：

$("#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"); 
     } 
    }); 
}) 

コントローラメソッドのデータを受信する、サーバーにファイルを保存し、その後、連想配列を使用してデータベースに文字列データとファイル名を挿入します。

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"; 
    } 

} 

現在のところ、これは2番目のAjax呼び出しを送信し、ファイル名のみをデータベースに挿入しますが、両方のデータセットをテーブルに送信する必要があります。

ありがとうございました。ここで

Answer 1

が、私は単一のものにあなたの2つのAJAX呼び出しを凝縮：私は呼び出しエラーを修正した

$("#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){ 

    }); 
});