在Javascript对象中转换表单元素

我是JS的新手，以下是我在Stackoverflow上发现的代码，有人能解释一下这个序列化是如何在下面的函数中逐步进行的吗?此外，序列化完成后，如何通过JSON对象解析以表格形式检索信息?

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>

这就是代码的作用

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

相关内容

最新更新

热门标签：