Блог

Главная - Вопросы по программированию - Преобразование элемента формы в объект Javascript

Преобразование элемента формы в объект Javascript

#javascript #jquery

#javascript #jquery

Вопрос:

Я новичок в 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>

Ответ №1:

Это то, что делает код

 // 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;
};
Метки: