양식 데이터를 JSON으로 변환하는 가장 좋은 방법

Question

JSON 형식의 데이터 양식을 webAPI로 보내야합니다.

<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가 제대로되지

나는 PAGE1에서 호출 popupform 있습니다. 코드는 다음과 같이 문자열을 반환!

DOCTYPE HTML> 연구 \ n 개의 \ 연구 \ 없음 \ 연구 \ \ 없음 메타 HTTP-당량 = \ "컨텐츠 유형 \" 내용 = \ "text/html과 캐릭터 세트 = 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; 
}; 

을, 그것을 좋아 사용

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