2016-10-16 12 views
0

JS에서 초보자이며 다음은 Stackoverflow 자체에서 찾은 코드입니다. 누군가이 직렬화가 아래의 함수, 단계별 프로세스에서 어떻게 발생하는지 설명해 주실 수 있습니까? 또한 일단 비주얼라이제이션이 완료되면 JSON 객체를 구문 분석하여 정보를 표 형식으로 검색하는 방법은 무엇입니까?자바 스크립트 객체의 Elemnt 변환

자바 스크립트

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


     <!DOCTYPE HTML> 

    <html> 

     <head> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
      <script type="text/javascript" src="demon.js"></script> 

     </head> 

    <body> 
    <h2>Form</h2> 
    <form action="" method="post"> 
    First Name:<input type="text" name="Fname" maxlength="12" size="12"/> <br/> 
    Last Name:<input type="text" name="Lname" maxlength="36" size="12"/> <br/> 
    Gender:<br/> 
    Male:<input type="radio" name="gender" value="Male"/><br/> 
    Female:<input type="radio" name="gender" value="Female"/><br/> 
    Favorite Food:<br/> 
    Steak:<input type="checkbox" name="food[]" value="Steak"/><br/> 
    Pizza:<input type="checkbox" name="food[]" value="Pizza"/><br/> 
    Chicken:<input type="checkbox" name="food[]" value="Chicken"/><br/> 
    <textarea wrap="physical" cols="20" name="quote" rows="5">Enter your favorite quote!</textarea><br/> 
    Select a Level of Education:<br/> 
    <select name="education"> 
    <option value="Jr.High">Jr.High</option> 
    <option value="HighSchool">HighSchool</option> 
    <option value="College">College</option></select><br/> 
    Select your favorite time of day:<br/> 
    <select size="3" name="TofD"> 
    <option value="Morning">Morning</option> 
    <option value="Day">Day</option> 
    <option value="Night">Night</option></select> 
    <p><input type="submit" /></p> 
    </form> 
    <h2>JSON</h2> 
    <pre id="result"> 
    </pre> 
    </body> 
    </html> 

답변

0

이 코드가 무엇을하고 있는지입니다

// create a jQuery plugin 
 
$.fn.serializeObject = function() { 
 
    // return object to store the values 
 
    var o = {}; 
 
    // call serializeArray on the form to get [{name: 'something', value: 'something'}] 
 
    var a = this.serializeArray(); 
 
    // iterate over the serialized array 
 
    $.each(a, function() { 
 
    // if the value has already been defined on the object 
 
    if (o[this.name] !== undefined) { 
 
     // check if the value is not an array 
 
     if (!o[this.name].push) { 
 
     // it's not so instantiate a new array with the value in it 
 
     o[this.name] = [o[this.name]]; 
 
     } 
 
     // add the value to the array of values 
 
     o[this.name].push(this.value || ''); 
 
    } else { 
 
     // we are dealing with a new value so set it to the json object 
 
     o[this.name] = this.value || ''; 
 
    } 
 
    }); 
 
    // return the json serialized object from the plugin 
 
    return o; 
 
};

관련 문제