2016-10-16 2 views
0

私はJSの初心者です。以下は、Stackoverflow自体で見つかったコードです。誰かがこのシリアル化が以下の関数、ステップワイズプロセスでどのように行われるか説明してください。また、JSONオブジェクトを構文解析して情報を表形式で取得する方法もあります。JavascriptオブジェクトのElemntフォームを変換する

JavaScriptが

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

関連する問題