フォームデータをJSONに変換する最も良い方法

Question

JSON形式のデータフォームをwebAPIに送信する必要があります。

私はページ1から呼び出さpopupformあります

<form id="popupForm" method="post" class="form-horizontal" action=""> 
<div class="form-group"> 
    <label class="col-sm-4 control-label" for="Nome">Nome</label> 
    <div class="col-sm-5"> 
     <input type="text" class="form-control" id="Nome" name="Nome" placeholder="Nome" /> 
    </div> 
</div> 
<div class="form-group"> 
    <label class="col-sm-4 control-label" for="Cognome">Cognome</label> 
    <div class="col-sm-5"> 
     <input type="text" class="form-control" id="Cognome" name="Cognome" placeholder="Cognome" /> 
    </div> 
</div> 
<div class="form-group"> 
    <label class="col-sm-4 control-label" for="Operatore">Operatore</label> 
    <div class="col-sm-5"> 
     <input type="text" class="form-control" id="Operatore" name="Operatore" placeholder="Operatore" /> 
    </div> 
</div> 
<div class="form-group"> 
    <label class="col-sm-4 control-label" for="Username">Username</label> 
    <div class="col-sm-5"> 
     <input type="text" class="form-control" id="Username" name="Username" placeholder="Username" /> 
    </div> 
</div> 
<div class="form-group"> 
    <label class="col-sm-4 control-label" for="Password">Password</label> 
    <div class="col-sm-5"> 
     <input type="password" class="form-control" id="Password" name="Password" placeholder="Password" /> 
    </div> 
</div> 
<div class="form-group"> 
    <label class="col-sm-4 control-label" for="GruppoDiLavoro">Gruppo Di Lavoro</label> 
    <div class="col-sm-5"> 
     <input type="text" class="form-control" id="GruppoDiLavoro" name="GruppoDiLavoro" placeholder="GruppoDiLavoro" /> 
    </div> 
</div> 
<div class="form-group"> 
    <label class="col-sm-4 control-label" for="ProfiloFunzionalità">Profilo Funzionalità</label> 
    <div class="col-sm-5"> 
     <input type="text" class="form-control" id="ProfiloFunzionalità" name="ProfiloFunzionalità" placeholder="ProfiloFunzionalità" /> 
    </div> 
</div> 
<div class="form-group"> 
    <label class="col-sm-4 control-label" for="LivelloDiAccesso">Livello Di Accesso</label> 
    <div class="col-sm-5"> 
     <select class="form-control" id="LivelloDiAccesso" name="LivelloDiAccesso" placeholder="LivelloDiAccesso"> 
      @*http://formvalidation.io/examples/bootstrap-combobox/*@ 
      <option value="1">Consultazione</option> 
      <option value="2">Ispettore 1° livello</option> 
      <option value="3">Ispettore 2° livello</option> 
      <option value="4">Tecnico</option> 
      <option value="5">Amministratore</option> 
     </select> 
    </div> 
</div> 
<div class="form-group"> 
    <div class="col-sm-5 col-sm-offset-4"> 
     <div class="checkbox"> 
      <label> 
       <input type="checkbox" id="Attivo" name="Attivo" />Attivo 
      </label> 
     </div> 
    </div> 
</div> 
<div class="form-group"> 
    <label class="col-sm-4 control-label" for="DataCreazione">Data Creazione</label> 
    <div class="col-sm-5"> 
     <input type="date" class="form-control" id="DataCreazione" name="DataCreazione" placeholder="DataCreazione" /> 
    </div> 
</div> 
<div class="form-group"> 
    <label class="col-sm-4 control-label" for="DataScadenza">Data Scadenza</label> 
    <div class="col-sm-5"> 
     <input type="date" class="form-control" id="DataScadenza" name="DataScadenza" placeholder="DataScadenza" /> 
    </div> 
</div> 
<div class="form-group"> 
    <label class="col-sm-4 control-label" for="Mail">Mail</label> 
    <div class="col-sm-5"> 
     <input type="text" class="form-control" id="Mail" name="Mail" placeholder="Mail" /> 
    </div> 
</div> 
<div class="form-group"> 
    <div class="col-sm-9 col-sm-offset-4"> 
     <button type="submit" class="btn btn-primary" name="Save" value="Save">Save</button> 
    </div> 
</div> 

Page1のは、このコードを持っている：

  function OpenPopup(pageUrl) { 
      //alert(localStorage.getItem("UtenteIndex")); 
      var $pageContent = $('<div/>'); 
      //$pageContent.load(pageUrl); 
      $pageContent.load(pageUrl, function() { 
       $('#popupForm', $pageContent).removeData('validator'); 
       $('#popupForm', $pageContent).removeData('unobtrusiveValidation'); 
       $.validator.unobtrusive.parse('form'); 

      }); 
      $dialog = $('<div class="popupWindow" style="overflow:auto"></div>') 
       .html($pageContent) 
       .dialog({ 
        draggable: true, 
        autoOpen: false, 
        resizable: false, 
        model: true, 
        title: 'Edita Utente', 
        height: 650, 
        width: 900, 
        close: function() { 
         $dialog.dialog('destroy').remove(); 
        } 
       }) 


      $('.popupWindow').on('submit', '#popupForm', function (e) { 
       var url = $('#popupForm')[0].action; 
       //alert($('#popupForm').serialize()) 
       $.ajax({ 
        type: "POST", 
        url: url, 
        data: $('#popupForm').serialize, 
        success: function (data) { 
         if (data.status) { 
          $dialog.dialog('close'); 
          oTable.ajax.reload(); 
         } 
         alert(url); 
         alert(JSON.stringify(data)); 
        }, 
        error: function (xhr, status, error) { 
         $dialog.dialog('close'); 
         alert(xhr.responseText); 
        } 
       }) 

       e.preventDefault(); 
      }) 
      $dialog.dialog('open'); 
     } 

出力JSONが正しくありません。コードは次のように文字列を返す：！

DOCTYPE HTML> Rの\ n個の\ rをする\ n個の\ rを\ \ n個のメタのhttp-当量= \ "のContent-Type \" 内容= \ "text/htmlの;のcharset = UTF-8 \ "/ \ rを\ nは\ rを\ nは
Utenti \ rを\ n個....

のみ入力データをstringfyするための最良の方法は何ですか？ どこが間違っていますか？

Answer 1

個人的に私はこのjQueryのスニペットを使用します。

$.fn.serializeObject = function() 
{ 
    var o = {}; 
    var a = this.serializeArray(); 
    $.each(a, function() { 
     if (o[this.name] !== undefined) { 
      if (!o[this.name].push) { 
       o[this.name] = [o[this.name]]; 
      } 
      o[this.name].push(this.value || ''); 
     } else { 
      o[this.name] = this.value || ''; 
     } 
    }); 
    return o; 
}; 

それが好きで、それを使用し、name属性がプロパティと値の値であるオブジェクトにフォームをシリアライズします：

data = $('#myForm').serializeObject();