如何使用ajax調用在服務器上發送多個數據？

Question

我有以下情況：用戶可以通過在文檔定義模板上添加元素來定義調查問卷。它可以添加簡單的問題或多個選擇或單個選擇的問題。下面的圖片是輸出。

問題是我如何能夠發送用戶定義的數據在服務器上使用ajax（一個文件可能有多個複選框和多個單選按鈕）。我試過的遠遠是獲取每個元素並將其存儲到一個數組，但我堅持如何發送它在服務器上。

$('#saveDocDef').click(function(){ 

     //get the document definition name 
     var docName = $('#docName').val(); 
     if(docName == ""){ 
      alert("You need to choose a name for the document"); 
      return; 
     } 
     //get the selected status 
     var docStatus = $('#selectStatus').val(); 
     if(docStatus == ''){ 
      alert("You need to select a valid status for the document"); 
      return; 
     } 

     //create a form to serialize the defined elements 
     //make sure that the form doesn't exist 
     $('#frmSubmit').remove(); 
     //append it to body 
     $('body').append('<form id="frmSubmit" action=""></form>'); 
     //all elements are hidden 
     //append the name and the status of the document definition 
     $('#frmSubmit').append('<input type="hidden" id="name" value="'+ docName +'">'); 
     $('#frmSubmit').append('<input type="hidden" id="status" value="'+ docStatus +'">'); 

     /*************************QUESTION****************************/ 
     //get all questions content 
     var questionText = $('.doc-def-quest-text'); 
     $(questionText).each(function(index){ 
      $('#frmSubmit').append('<input type="hidden" id="'+ questionText['index']+'" name="questionContent" value="'+ questionText.eq(index).val() +'">'); 

     }); 

     /**************************CHECK BOX*************************/ 

     //get all checkboxes elements content 
     var ckbElements = $('.ckbElem'); 
     //create new checkbox definition for each element 
     $(ckbElements).each(function(index){ 
      var ckbQuest = $(ckbElements[index]).find('.ckbQuestionText').val();     
      $('#frmSubmit').append('<input type="hidden" id="'+ ckbElements['index']+'" name="question" value="'+ ckbQuest +'">'); 
      var predefinedAnswers = $(ckbElements[index]).find('.ckbOptions')[0]; 
      $(predefinedAnswers).each(function(i){ 
       $('#frmSubmit').append('<input type="hidden" id="'+ predefinedAnswers['i']+'" name="options" value="'+predefinedAnswers.options[i].text +'">'); 
      }); 
     }); 

     /**************************RADIO***************************/ 
     //get all radio elements content 
     var radioElements = $('.radioElem'); 
     //create new radio definition for each element 
     $(radioElements).each(function(index){ 
      var radioQuest = $(radioElements[index]).find('.radioQuestionText').val(); 
      $('#frmSubmit').append('<input type="hidden" id="'+ radioElements['index']+'" name="question" value="'+ radioQuest +'">'); 
      var predefinedAnswers = $(radioElements[index]).find('.radioOptions')[0]; 
      $(predefinedAnswers).each(function(i){ 
       $('#frmSubmit').append('<input type="hidden" id="'+ predefinedAnswers['i']+'" name="options" value="'+predefinedAnswers.options[i].text +'">'); 
      }); 
     }); 

     var result = $('form').serialize(); 
     $("#results").text(result); 

     $.ajax({ 
      url :"/eMuse/admin/saveDocument", 
      dataType: 'json', 
      accepts :{ 
       xml : 'text/xml', 
       text: 'text/plain' 
      }, 
      data : {request : result}, 
      success : function(response){ 
       //do something 
      } 
     }); 
    }); 

Answer 1

與多個選擇的形式的元件給出相同的形式名稱： 例如：

<input type="checkout" name="language[]" value="english"> 
<input type="checkout" name="french[]" value="english"> 

（在[]將發送在陣列中的信息）

可以使用serialize()並將其作爲帖子或獲取方法發送。

$("#idForm").submit(function() { 

    var url = "path/to/your/script.php"; // the script where you handle the form input. 

    $.ajax({ 
      type: "POST", 
      url: url, 
      data: $("#idForm").serialize(), // serializes the form's elements. 
      success: function(data) 
      { 
       alert(data); // show response from the php script. 
      } 
     }); 

    return false; // avoid to execute the actual submit of the form. 
}); 

Answer 2

var data = { 'docName' : docName , 'docStatus' : docStatus ,'questionText' :questionText ,'answers' :answers }; 
$.ajax({ 

    url: 'url', 
    type: 'POST', 
    contentType: 'application/json; charset=utf-8', 
    data: JSON.stringify(data), 
    success: function (result) { 
    } 
});