Chuyển đổi dữ liệu biểu mẫu thành đối tượng JSON

Question

Tôi đang cố chuyển đổi dữ liệu biểu mẫu HTML thành đối tượng JSON, tôi có this thread, nhưng tôi không biết tại sao nó không hoạt động đối với tôi. Tôi đang sử dụng mã sau đây.

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

tôi đã cố gắng để gỡ lỗi nó, và tôi nhận thấy rằng khi chức năng của tôi là chạy, nó luôn luôn chạy mã trong Statment khác.

Answer 1

Có thể chỉ sử dụng chức năng tuần tự hóa jquery?

$("#myform").serialize() 

Bạn có thể thực hiện xử lý khác sau khi bạn có đối tượng 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

Working Jsbin dụ http://jsbin.com/oTimiGE/1/edit

thử jquery serializeArray() phương pháp

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

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

Answer 4

tôi đã thêm trên hình thức trong JSFiddle và nó sẽ hiển thị dữ liệu JSON như đầu ra.

Working JSFiddle

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

Answer 5

Sử dụng jQuery plugin này .serializeJSON() để chuyển đổi dữ liệu mẫu để đối tượng JSON.

<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() hàm trả về một đối tượng JSON.

Answer 6

Đối với người tìm kiếm google,

tôi đã tạo ra JSON Array với hình thức tuần tự như thế này,

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)