フォームデータをJSONオブジェクトに変換する

Question

HTMLフォームデータをJSONオブジェクトに変換しようとしていますが、this threadがありますが、それがなぜ機能しないのか分かりません。私は次のコードを使用しています。

<form id="myform" action="" method="post"> 
    <div class="form-field"> 
     <label for="title">Title</label> 
     <input name="title" id="title" type="text" value="" size="40" aria-required="true"> 
    </div> 
    <div class="form-field form-required"> 
     <label for="your-name">Your Name</label> 
     <input name="yourName" id="yourName" type="text" value="" size="40" aria-required="true"> 
    </div> 
    <div class="form-field"> 
     <label for="contact-no">Contact No:</label> 
     <input name="contact" id="contact" type="text" value="" size="40" aria-required="true"> 
    </div> 
    <div class="form-field"> 
     <label for="description">Description:</label> 
     <textarea name="description" id="description" rows="1" cols="40" aria-required="true"></textarea> 
    </div> 
    <div class="form-field"> 
     <label for="email">Email:</label> 
     <input name="email" id="email" type="text" value="optional" size="40" aria-required="true"> 
    </div> 
    <div class="form-field"> 
     <label for="city">City:</label> 
     <input name="city" id="city" type="text" value="" size="40" aria-required="true"> 
    </div> 
    <div class="form-field"> 
     <label for="country">Country:</label> 
     <input name="country" id="country" type="text" value="" size="40" aria-required="true"> 
    </div> 
    <div class="form-field"> 
     <label for="pic1">Picture 1:</label> 
     <input type="file" name="pic1" id="pic1"> 
    </div> 
    <div class="form-field"> 
     <label for="pic2">Picture 2:</label> 
     <input type="file" name="pic2" id="pic2"> 
    </div> 
    <div class="form-field"> 
     <label for="pic3">Picture 3:</label> 
     <input type="file" name="pic3" id="pic3"> 
    </div> 
    <div class="form-field"> 
     <label for="pic4">Picture 4:</label> 
     <input type="file" name="pic4" id="pic4"> 
    </div> 
    <div class="form-field"> 
     <label for="pic5">Picture 5:</label> 
     <input type="file" name="pic5" id="pic5"> 
    </div> 
    <div class="form-field"> 
     <label for="demand">Your Demand:</label> 
     <input name="demand" id="demand" type="text" value="" size="40" aria-required="true"> 
    </div> 
    <p class="submit"> 
     <input type="submit" name="postAd" id="postAd" class="button" value="Post Ad For Review"> 
    </p> 
    <div id="results">hello</div> 
</form> 

 

$(document).ready(function(){ 
    $.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 { 
       alert(this.name); 
       o[this.name] = this.value || ''; 
      } 
     }); 
     return o; 
    }; 

    $('#myform').submit(function() { 
     $('#result').text(JSON.stringify($('#myform').serializeObject())); 
     return false; 
    }); 
}); 

私はそれをデバッグしようとした、と私は私の関数が実行されるとき、それは常に他のなステートメント内のコードを実行されることに気づきました。

Answer 1

多分、jquery serialize関数を使用しますか？

$("#myform").serialize() 

JSONオブジェクトを取得したら、後で他の処理を行うことができます。

Answer 2

$.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; 
}; 

$(function() { 
    $('form').submit(function() { 
     $('#result').text(JSON.stringify($('form').serializeObject())); 
     return false; 
    }); 
}); 

Answer 3

ワーキングJsbin例http://jsbin.com/oTimiGE/1/edit

トライjqueryのserializeArray()方法

http://api.jquery.com/serializeArray/

$('form').submit(function() { 
    console.log($(this).serializeArray()); 
    return false; 
}); 

Answer 4

IはJSFiddleにフォーム上に追加し、それが出力としてJSONデータを表示します。

Working JSFiddle

$(function() { 
    $('form').submit(function() { 
    $('#result').text(JSON.stringify($('form').serializeObject())); 
    return false; 
    }); 
}); 

Answer 5

JSONオブジェクトにフォームデータを変換するために、このjQueryプラグイン .serializeJSON()を使用してください。

<form id="my-profile"> 
<!-- simple attribute --> 
    <input type="text" name="fullName" value="Mario Izquierdo" /> 

<!-- nested attributes --> 
    <input type="text" name="address[city]" value="San Francisco" /> 
    <input type="text" name="address[state][name]" value="California" /> 
    <input type="text" name="address[state][abbr]" value="CA" /> 
</form> 

Javascriptを：

$('#my-profile').serializeJSON(); 

// returns => 
{ 
    fullName: "Mario Izquierdo", 

    address: { 
    city: "San Francisco", 
    state: { 
    name: "California", 
    abbr: "CA" 
    } 
} 

serializeJSON()機能は、JSONオブジェクトを返します。 Googleの捜索のために

Answer 6

、

あなたがそれを使用、デバッグコンソールでブラウザを使用している場合、私は、ただ、先端、このような直列化形式で

var jsonArray = []; 

    var splittedFormData = $("#formToPost").serialize().split('&'); 

      $.each(splittedFormData, function (key, value) { 

       item = {}; 
       var splittedValue = value.split('=');    
       item["name"] = splittedValue[0]; 
       item["value"] = splittedValue[1]; 
       jsonArray.push(item); 
      }); 

    console.log(jsonArray)