මගේ පෝරමයේ සියලුම අංග ජාවාස්ක්‍රිප්ට් වස්තුවක් බවට පරිවර්තනය කරන්නේ කෙසේද?

සෑම මූලද්‍රව්‍යයක්ම ලූපයක් නොමැතිව මගේ පෝරමයෙන් ජාවාස්ක්‍රිප්ට් වස්තුවක් ස්වයංක්‍රීයව ගොඩනගා ගැනීමට මම කැමතියි. ආපසු ලබා දුන් පරිදි මට නූලක් $('#formid').serialize();අවශ්‍ය නැත, සිතියම නැවත ලබා දීමට මට අවශ්‍ය නැත$('#formid').serializeArray();

serializeArrayදැනටමත් එය හරියටම කරයි. ඔබට අවශ්‍ය ආකෘතියට දත්ත සම්බාහනය කළ යුතුය:

function objectifyForm(formArray) {//serialize data function

  var returnArray = {};
  for (var i = 0; i < formArray.length; i++){
    returnArray[formArray[i]['name']] = formArray[i]['value'];
  }
  return returnArray;
}

සැඟවුණු ක්ෂේත්‍ර සඳහා සැබෑ යෙදවුම් වලට සමාන නමක් ඇති බැවින් ඒවා නැවත ලියනු ලැබේ.

ආකෘති ලොක්කා මෙන් JSON වෙත පරිවර්තනය කරන්න

වත්මන් ප්‍රභවය GitHub සහ Bower හි ඇත.

ower bower install jquery-serialize-object

පහත කේතය දැන් ඉවත් කර ඇත .

පහත දැක්වෙන කේතයට සියලු ආකාරයේ ආදාන නම් සමඟ වැඩ කළ හැකිය; ඔබ බලාපොරොත්තු වූ ආකාරයටම ඒවා හසුරුවන්න.

උදාහරණයක් වශයෙන්:

<!-- All of these will work! -->
<input name="honey[badger]" value="a">
<input name="wombat[]" value="b">
<input name="hello[panda][]" value="c">
<input name="animals[0][name]" value="d">
<input name="animals[0][breed]" value="e">
<input name="crazy[1][][wonky]" value="f">
<input name="dream[as][vividly][as][you][can]" value="g">

// Output
{
  "honey":{
    "badger":"a"
  },
  "wombat":["b"],
  "hello":{
    "panda":["c"]
  },
  "animals":[
    {
      "name":"d",
      "breed":"e"
    }
  ],
  "crazy":[
    null,
    [
      {"wonky":"f"}
    ]
  ],
  "dream":{
    "as":{
      "vividly":{
        "as":{
          "you":{
            "can":"g"
          }
        }
      }
    }
  }
}

භාවිතය

$('#my-form').serializeObject();

මන්තර ගුරුකම් (ජාවාස්ක්‍රිප්ට්)

(function($){
    $.fn.serializeObject = function(){

        var self = this,
            json = {},
            push_counters = {},
            patterns = {
                "validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\])*$/,
                "key":      /[a-zA-Z0-9_]+|(?=\[\])/g,
                "push":     /^$/,
                "fixed":    /^\d+$/,
                "named":    /^[a-zA-Z0-9_]+$/
            };


        this.build = function(base, key, value){
            base[key] = value;
            return base;
        };

        this.push_counter = function(key){
            if(push_counters[key] === undefined){
                push_counters[key] = 0;
            }
            return push_counters[key]++;
        };

        $.each($(this).serializeArray(), function(){

            // Skip invalid keys
            if(!patterns.validate.test(this.name)){
                return;
            }

            var k,
                keys = this.name.match(patterns.key),
                merge = this.value,
                reverse_key = this.name;

            while((k = keys.pop()) !== undefined){

                // Adjust reverse_key
                reverse_key = reverse_key.replace(new RegExp("\\[" + k + "\\]$"), '');

                // Push
                if(k.match(patterns.push)){
                    merge = self.build([], self.push_counter(reverse_key), merge);
                }

                // Fixed
                else if(k.match(patterns.fixed)){
                    merge = self.build([], k, merge);
                }

                // Named
                else if(k.match(patterns.named)){
                    merge = self.build({}, k, merge);
                }
            }

            json = $.extend(true, json, merge);
        });

        return json;
    };
})(jQuery);

මොකක්ද වැරැද්ද:

var data = {};
$(".form-selector").serializeArray().map(function(x){data[x.name] = x.value;}); 

ටොබියාස් කොහෙන්ගේ විසඳුමේ ස්ථාවර අනුවාදයකි. මේ එක නිවැරදිව වැනි falsy වටිනාකම් හසුරුවන 0හා ''.

jQuery.fn.serializeObject = function() {
  var arrayData, objectData;
  arrayData = this.serializeArray();
  objectData = {};

  $.each(arrayData, function() {
    var value;

    if (this.value != null) {
      value = this.value;
    } else {
      value = '';
    }

    if (objectData[this.name] != null) {
      if (!objectData[this.name].push) {
        objectData[this.name] = [objectData[this.name]];
      }

      objectData[this.name].push(value);
    } else {
      objectData[this.name] = value;
    }
  });

  return objectData;
};

ඔබේ කේතීකරණ පහසුව සඳහා කෝපි ස්ක්‍රිප්ට් අනුවාදයක්:

jQuery.fn.serializeObject = ->
  arrayData = @serializeArray()
  objectData = {}

  $.each arrayData, ->
    if @value?
      value = @value
    else
      value = ''

    if objectData[@name]?
      unless objectData[@name].push
        objectData[@name] = [objectData[@name]]

      objectData[@name].push value
    else
      objectData[@name] = value

  return objectData

මම භාවිතා කිරීමට කැමතියි Array.prototype.reduceඑය එක් ලයිනර් එකක් වන අතර එය Underscore.js හෝ ඒ හා සමාන නොවේ.

$('#formid').serializeArray()
    .reduce(function(a, x) { a[x.name] = x.value; return a; }, {});

මෙය භාවිතා කරන පිළිතුරට සමාන ය Array.prototype.map, නමුත් අතිරේක වස්තු විචල්‍යයක් සමඟ ඔබේ විෂය පථය අවුල් කිරීමට අවශ්‍ය නොවේ. එක්-නැවතුම් සාප්පු සවාරි.

වැදගත් සටහන : අනුපිටපත් nameගුණාංග ඇති යෙදවුම් සහිත ආකෘති වලංගු HTML වන අතර එය ඇත්ත වශයෙන්ම පොදු ප්‍රවේශයකි. මෙම ත්‍රෙඩ් එකේ ඕනෑම පිළිතුරක් භාවිතා කිරීම නුසුදුසු වනු ඇත (වස්තු යතුරු අද්විතීය විය යුතු බැවින්).

මේ සියලු පිළිතුරු මට ඉහළින් පෙනෙන්නට තිබුණි. සරල බව සඳහා යමක් පැවසිය යුතුය. ඔබගේ සියලු පෝරම යෙදවුම් වල නම් ගුණාංගය සකසා ඇති තාක් කල් මෙය ක්‍රියාත්මක විය යුත්තේ ජිම් ඩැන්ඩි ය.

$('form.myform').submit(function () {
  var $this = $(this)
    , viewArr = $this.serializeArray()
    , view = {};

  for (var i in viewArr) {
    view[viewArr[i].name] = viewArr[i].value;
  }

  //Do stuff with view object here (e.g. JSON.stringify?)
});

එක් එක් මූලද්රව්ය පරීක්ෂා නොකර මෙය කිරීමට ඇත්ත වශයෙන්ම ක්රමයක් නොමැත. ඔබට සැබවින්ම දැන ගැනීමට අවශ්‍ය වන්නේ "වෙනත් අයෙකු දැනටමත් පෝරමයක් JSON වස්තුවක් බවට පරිවර්තනය කරන ක්‍රමයක් ලියා තිබේද?" පහත දැක්වෙන දේ ක්‍රියාත්මක විය යුතුය - එය ඔබට ලබා දෙන්නේ පෝස්ට් එකක් හරහා ආපසු ලබා දෙන ආකෘති මූලද්‍රව්‍යයන් පමණක් බව සලකන්න (නමක් තිබිය යුතුය). මෙය පරීක්ෂා නොකෙරේ .

function formToJSON( selector )
{
     var form = {};
     $(selector).find(':input[name]:enabled').each( function() {
         var self = $(this);
         var name = self.attr('name');
         if (form[name]) {
            form[name] = form[name] + ',' + self.val();
         }
         else {
            form[name] = self.val();
         }
     });

     return form;
}

ඔබ Underscore.js භාවිතා කරන්නේ නම් ඔබට සාපේක්ෂව සංක්ෂිප්තව භාවිතා කළ හැකිය:

_.object(_.map($('#myform').serializeArray(), _.values))

අනෙක් සියලුම පිළිතුරු සමඟ ගැටළුවක් ඇති බව මම පරීක්ෂා කර බැලුවෙමි, ආදාන නම අරාව ලෙස name[key]නම්, එය මේ ආකාරයෙන් ජනනය කළ යුතුය:

name:{ key : value }

උදාහරණයක් ලෙස: ඔබට පහත ආකෘතියට සමාන HTML පෝරමයක් තිබේ නම්:

<form>
    <input name="name" value="value" >
    <input name="name1[key1]" value="value1" >
    <input name="name2[key2]" value="value2" >
    <input name="name3[key3]" value="value3" >
</form>

නමුත් එය පහත JSON මෙන් ජනනය කළ යුතු අතර අනෙක් සියලුම පිළිතුරු සමඟ පහත සඳහන් වස්තුවක් බවට පත් නොවේ. එබැවින් පහත දැක්වෙන JSON වැනි දෙයක් ගෙන ඒමට යමෙකුට අවශ්‍ය නම්, පහත JS කේතය උත්සාහ කරන්න.

{
    name  : 'value',
    name1 : { key1 : 'value1' },
    name2 : { key2 : 'value2' },
    name3 : { key2 : 'value2' }
}

$.fn.getForm2obj = function() {
  var _ = {};
  $.map(this.serializeArray(), function(n) {
    const keys = n.name.match(/[a-zA-Z0-9_]+|(?=\[\])/g);
    if (keys.length > 1) {
      let tmp = _;
      pop = keys.pop();
      for (let i = 0; i < keys.length, j = keys[i]; i++) {
        tmp[j] = (!tmp[j] ? (pop == '') ? [] : {} : tmp[j]), tmp = tmp[j];
      }
      if (pop == '') tmp = (!Array.isArray(tmp) ? [] : tmp), tmp.push(n.value);
      else tmp[pop] = n.value;
    } else _[keys.pop()] = n.value;
  });
  return _;
}
console.log($('form').getForm2obj());
$('form input').change(function() {
  console.clear();
  console.log($('form').getForm2obj());
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<form>
  <input name="name" value="value">
  <input type="checkbox" name="name1[]" value="1" checked="checked">1
  <input type="checkbox" name="name1[]" value="2">2
  <input type="checkbox" name="name1[]" value="3">3<br>
  <input type="radio" name="gender" value="male" checked="checked">male
  <input type="radio" name="gender" value="female"> female
  <input name="name2[key1]" value="value1">
  <input name="one[another][another_one]" value="value4">
  <input name="name3[1][name]" value="value4">
  <input name="name3[2][name]" value="value4">
  <input name="[]" value="value5">
</form>

හරි, මම දන්නවා මේ වන විටත් ඉතා ඉහළ පිළිතුරක් ඇති නමුත් තවත් සමාන ප්‍රශ්නයක් මෑතකදී අසන ලද අතර, මෙම ප්‍රශ්නයටද මා යොමු කරන ලදී. පිළිගත් විසඳුමට වඩා වාසියක් ලබා දෙන නිසා මම මගේ විසඳුම ද ඉදිරිපත් කිරීමට කැමැත්තෙමි: ඔබට ආබාධිත ආකෘති අංග ඇතුළත් කළ හැකිය (සමහර විට එය වැදගත් වන්නේ ඔබේ UI ක්‍රියා කරන ආකාරය අනුව)

මෙන්න මගේ පිළිතුර අනෙක් SO ප්‍රශ්නයෙන් :

මුලදී, අපි භාවිතා කළේ jQuery serializeArray()ක්‍රමවේදය, නමුත් එයට අක්‍රීය කර ඇති ආකෘති අංග ඇතුළත් නොවේ. පිටුවේ ඇති වෙනත් ප්‍රභවයන් සමඟ "සමමුහුර්ත" කරන ආකෘති මූලද්‍රව්‍ය අපි බොහෝ විට අක්‍රීය කරන්නෙමු, නමුත් අපගේ අනුක්‍රමික වස්තුවෙහි දත්ත ඇතුළත් කිරීමට අපට අවශ්‍යය. ඉතින් serializeArray()එළියට. :inputදී ඇති බහාලුමක් තුළ ඇති සියලුම ආදාන අංග (සක්‍රීය හා අක්‍රීය) ලබා ගැනීමට අපි තේරීම් කාරකය භාවිතා කළෙමු$.map() අපගේ වස්තුව නිර්මාණය කිරීමටත් අපි .

var inputs = $("#container :input");
var obj = $.map(inputs, function(n, i)
{
    var o = {};
    o[n.name] = $(n).val();
    return o;
});
console.log(obj);

මෙය ක්‍රියාත්මක වීමට නම්, ඔබේ එක් එක් යෙදවුම් සඳහා a අවශ්‍ය වේ name ගුණාංගයක් ලෙස ඇති වස්තුවේ දේපලෙහි නම වනු ඇත.

එය ඇත්ත වශයෙන්ම අප භාවිතා කළ දෙයට වඩා තරමක් වෙනස් කර ඇත. .NET හැඳුනුම්පතක් ලෙස ව්‍යුහගත කර ඇති වස්තුවක් නිර්මාණය කිරීමට අපට අවශ්‍ය විය, එබැවින් අපි මෙය භාවිතා කළෙමු: (එය ප්‍රයෝජනවත් නම් මම මෙහි ලබා දෙමි)

var obj = $.map(inputs, function(n, i)
{
    return { Key: n.name, Value: $(n).val() };
});
console.log(obj);

මෙම විසඳුම් දෙකටම මම කැමතියි, මන්ද ඒවා සරල භාවිතයන් වන බැවිනි $.map() ශ්‍රිතයේ , ඔබේ තේරීම මත ඔබට සම්පූර්ණ පාලනයක් ඇත (එබැවින්, ඔබේ ප්‍රති result වස්තුව ඇතුළුව ඔබ අවසන් කරන්නේ කුමන මූලද්‍රව්‍යයන්ද). එසේම, අමතර ප්ලගිනයක් අවශ්‍ය නොවේ. සරල පැරණි jQuery.

මෙම ශ්‍රිතය එකම නමක් සහිත බහු මූලද්‍රව්‍ය සමඟ බහුවිධ අරා හැසිරවිය යුතුය.

මම මේ දක්වා අවුරුදු කිහිපයක් තිස්සේ එය භාවිතා කර ඇත:

jQuery.fn.serializeJSON=function() {
  var json = {};
  jQuery.map(jQuery(this).serializeArray(), function(n, i) {
    var _ = n.name.indexOf('[');
    if (_ > -1) {
      var o = json;
      _name = n.name.replace(/\]/gi, '').split('[');
      for (var i=0, len=_name.length; i<len; i++) {
        if (i == len-1) {
          if (o[_name[i]]) {
            if (typeof o[_name[i]] == 'string') {
              o[_name[i]] = [o[_name[i]]];
            }
            o[_name[i]].push(n.value);
          }
          else o[_name[i]] = n.value || '';
        }
        else o = o[_name[i]] = o[_name[i]] || {};
      }
    }
    else {
      if (json[n.name] !== undefined) {
        if (!json[n.name].push) {
          json[n.name] = [json[n.name]];
        }
        json[n.name].push(n.value || '');
      }
      else json[n.name] = n.value || '';      
    }
  });
  return json;
};

ඔබට මෙය කරන්න පුළුවන්:

var frm = $(document.myform);
var data = JSON.stringify(frm.serializeArray());

JSON බලන්න .

එක්-ලයිනර් (jQuery හැර වෙනත් පරායත්තයන් නොමැත), mapක්‍රමයට පාස් කරන ලද ශ්‍රිතය සඳහා ස්ථාවර වස්තු බන්ධන භාවිතා කරයි .

$('form').serializeArray().map(function(x){this[x.name] = x.value; return this;}.bind({}))[0]

එය කරන්නේ කුමක්?

"id=2&value=1&comment=ok" => Object { id: "2", value: "1", comment: "ok" }

ප්‍රගතිශීලී වෙබ් යෙදුම් සඳහා සුදුසු ය (යමෙකුට නිත්‍ය පෝරමය ඉදිරිපත් කිරීමේ ක්‍රියාව සහ අජැක්ස් ඉල්ලීම් යන දෙකටම පහසුවෙන් සහාය විය හැකිය)

භාවිත:

function form_to_json (selector) {
  var ary = $(selector).serializeArray();
  var obj = {};
  for (var a = 0; a < ary.length; a++) obj[ary[a].name] = ary[a].value;
  return obj;
}

ප්‍රතිදානය:

{"myfield": "myfield value", "passwordfield": "mypasswordvalue"}

සරල බව මෙහි හොඳම ය. මම සාමාන්‍ය ප්‍රකාශනයක් වෙනුවට සරල නූල් ආදේශකයක් භාවිතා කර ඇත්තෙමි. මම සාමාන්‍ය ප්‍රකාශන විශේෂ expert යෙක් නොවෙමි, නමුත් ඔබට ඉතා සංකීර්ණ වස්තූන් පවා ජනනය කළ හැකි යැයි මම විශ්වාස කරමි.

var values = $(this).serialize(),
attributes = {};

values.replace(/([^&]+)=([^&]*)/g, function (match, name, value) {
    attributes[name] = value;
});

සමහර පැරණි පිළිතුරෙන්:

$('form input, form select').toArray().reduce(function(m,e){m[e.name] = $(e).val(); return m;},{})

[2020 යාවත්කාලීන කරන්න]

වැනිලා JS දී සරල oneliner ගනුදෙනුකරුවන්ගේ සමග fromEntries (සෑම විටම ලෙස, බ්රව්සරය සහාය):

Object.fromEntries(new FormData(form))

ටොබියාස් කොහෙන්ගේ කේතයේ ගැටලුවක් මට හමු විය (ඒ පිළිබඳව කෙලින්ම අදහස් දැක්වීමට මට ප්‍රමාණවත් කරුණු නොමැත), එසේ නොමැතිනම් එය මට ප්‍රයෝජනවත් වේ. ඔබට එකම නම සහිත තෝරාගත් විකල්ප දෙකක් තිබේ නම්, දෙකම අගය = "", මුල් කේතය "නම" වෙනුවට "නම": "" නිපදවයි: ["", ""]

පළමු නම් කොන්දේසියට "|| o [this.name] == ''" එකතු කිරීමෙන් මෙය නිවැරදි කළ හැකි යැයි මම සිතමි:

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] || o[this.name] == '') {
            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;
};

මාසෙක්ගේ විසඳුම භාවිතා කරමින් , ASP.NET MVC ඔවුන්ගේ කැදැලි / සංකීර්ණ වස්තූන් එකම ආකාරයකින් හසුරුවන ආකාරය සමඟ කටයුතු කිරීමට මම එය වෙනස් කළෙමි. ඔබ කළ යුතුව ඇත්තේ වලංගු කෑල්ල මේ සඳහා වෙනස් කිරීම පමණි:

"validate": /^[a-zA-Z][a-zA-Z0-9_]*((?:\[(?:\d*|[a-zA-Z0-9_]+)\])*(?:\.)[a-zA-Z][a-zA-Z0-9_]*)*$/,

මෙය ගැලපෙන අතර පසුව නම් සහිත මූලද්‍රව්‍ය නිවැරදිව සිතියම් ගත කරයි:

<input type="text" name="zooName" />

සහ

<input type="text" name="zooAnimals[0].name" />

මම මේ ප්රශ්නය සඳහා සොයා ඉතා සරළ හා වඩාත් නිවැරදි මාර්ගය භාවිතා කිරීමට විය හොඳද ප්ලගිනය හෝ මෙම එක් (0.5K බයිට් ප්රමාණය පමණ වන).

එය බහුමාන අරා සමඟ ද ක්‍රියා කරයි.

$.fn.serializeObject = function()
{
	return $.deparam(this.serialize());
};

JQuery , jquery.serializeJSON සඳහා එය කිරීමට ප්ලගිනයක් තිබේ . මම දැන් ව්‍යාපෘති කිහිපයක එය සාර්ථකව භාවිතා කර ඇත්තෙමි. එය චාම් එකක් මෙන් ක්‍රියා කරයි.

const formData = new FormData(form);

let formDataJSON = {};

for (const [key, value] of formData.entries()) {

    formDataJSON[key] = value;
}

මම මෙම ප්‍රවේශයට වැඩි කැමැත්තක් දක්වන්නේ: ඔබට එකතු 2 කට වඩා නැවත යෙදීමට අවශ්‍ය නැත, ඔබට අවශ්‍ය නම් "නම" සහ "අගය" හැර වෙනත් දේ ලබා ගත හැකි අතර, ඔබේ වටිනාකම් වස්තුව තුළ ගබඩා කිරීමට පෙර ඒවා සනීපාරක්ෂාව කළ හැකිය ( ඔබට ගබඩා කිරීමට අකමැති පෙරනිමි අගයන් තිබේ නම්, උදාහරණයක් ලෙස).

$.formObject = function($o) {
    var o = {},
        real_value = function($field) {
            var val = $field.val() || "";

            // additional cleaning here, if needed

            return val;
        };

    if (typeof o != "object") {
        $o = $(o);
    }

    $(":input[name]", $o).each(function(i, field) {
        var $field = $(field),
            name = $field.attr("name"),
            value = real_value($field);

        if (o[name]) {
            if (!$.isArray(o[name])) {
                o[name] = [o[name]];
            }

            o[name].push(value);
        }

        else {
            o[name] = value;
        }
    });

    return o;
}

එසේ භාවිතා කරන්න:

var obj = $.formObject($("#someForm"));

ෆයර්ෆොක්ස් හි පමණක් පරීක්ෂා කර ඇත.

ඕනෑම දෙයක් වස්තුවක් බවට පත් කරන්න (ඒකකය පරීක්ෂා කර නැත)

<script type="text/javascript">
string = {};

string.repeat = function(string, count)
{
    return new Array(count+1).join(string);
}

string.count = function(string)
{
    var count = 0;

    for (var i=1; i<arguments.length; i++)
    {
        var results = string.match(new RegExp(arguments[i], 'g'));
        count += results ? results.length : 0;
    }

    return count;
}

array = {};

array.merge = function(arr1, arr2)
{
    for (var i in arr2)
    {
        if (arr1[i] && typeof arr1[i] == 'object' && typeof arr2[i] == 'object')
            arr1[i] = array.merge(arr1[i], arr2[i]);
        else
            arr1[i] = arr2[i]
    }

    return arr1;
}

array.print = function(obj)
{
    var arr = [];
    $.each(obj, function(key, val) {
        var next = key + ": ";
        next += $.isPlainObject(val) ? array.print(val) : val;
        arr.push( next );
      });

    return "{ " +  arr.join(", ") + " }";
}

node = {};

node.objectify = function(node, params)
{
    if (!params)
        params = {};

    if (!params.selector)
        params.selector = "*";

    if (!params.key)
        params.key = "name";

    if (!params.value)
        params.value = "value";

    var o = {};
    var indexes = {};

    $(node).find(params.selector+"["+params.key+"]").each(function()
    {
        var name = $(this).attr(params.key),
            value = $(this).attr(params.value);

        var obj = $.parseJSON("{"+name.replace(/([^\[]*)/, function()
        {
            return '"'+arguments[1]+'"';
        }).replace(/\[(.*?)\]/gi, function()
        {
            if (arguments[1].length == 0)
            {
                var index = arguments[3].substring(0, arguments[2]);
                indexes[index] = indexes[index] !== undefined ? indexes[index]+1 : 0;

                return ':{"'+indexes[index]+'"';
            }
            else
                return ':{"'+escape(arguments[1])+'"';
        })+':"'+value.replace(/[\\"]/gi, function()
        {
            return "\\"+arguments[0]; 
        })+'"'+string.repeat('}', string.count(name, ']'))+"}");

        o = array.merge(o, obj);
    });

    return o;
}
</script>

පරීක්ෂණයේ ප්‍රතිදානය:

$(document).ready(function()
{
    console.log(array.print(node.objectify($("form"), {})));
    console.log(array.print(node.objectify($("form"), {selector: "select"})));
});

මත

<form>
    <input name='input[a]' type='text' value='text'/>
    <select name='input[b]'>
        <option>select</option>
    </select>

    <input name='otherinput[c][a]' value='a'/>
    <input name='otherinput[c][]' value='b'/>
    <input name='otherinput[d][b]' value='c'/>
    <input name='otherinput[c][]' value='d'/>

    <input type='hidden' name='anotherinput' value='hidden'/>
    <input type='hidden' name='anotherinput' value='1'/>

    <input type='submit' value='submit'/>
</form>

ලැබෙනු ඇත:

{ input: { a: text, b: select }, otherinput: { c: { a: a, 0: b, 1: d }, d: { b: c } }, anotherinput: 1 }
{ input: { b: select } }

තෝරාගත් විසඳුමේ ගැටලුවක් මට හමු විය.

අරාව මත පදනම් වූ ආකෘති භාවිතා කරන විට jQuery serializeArray () ශ්‍රිතය සැබවින්ම මිය යයි.

මා සතුව PHP රාමුවක් ඇත, එය එකම පෝරමයක් එකම පිටුවකට කිහිප වතාවක්ම බැලීමට ඉඩ දීම සඳහා අරාව මත පදනම් වූ ක්ෂේත්‍ර නාම භාවිතා කරයි. ගැටුම් ආකෘති ආකෘති නොමැතිව එකම පිටුවක එකතු කිරීම, සංස්කරණය කිරීම සහ මකා දැමීම යන දෙකම යෙදීමට මෙය පහසුය.

මෙම නිරපේක්ෂ පාදක ක්‍රියාකාරිත්වය පිටතට නොගෙන ආකෘති මුද්‍රා තැබීමට මට අවශ්‍ය වූ නිසා මම මගේම seralizeArray () ලිවීමට තීරණය කළෙමි.

        var $vals = {};

        $("#video_edit_form input").each(function(i){
            var name = $(this).attr("name").replace(/editSingleForm\[/i, '');

            name = name.replace(/\]/i, '');

            switch($(this).attr("type")){
                case "text":
                    $vals[name] = $(this).val();
                    break;
                case "checkbox":
                    if($(this).attr("checked")){
                        $vals[name] = $(this).val();
                    }
                    break;
                case "radio":
                    if($(this).attr("checked")){
                        $vals[name] = $(this).val();
                    }
                    break;
                default:
                    break;
            }
        });

කරුණාකර සටහන් කරන්න: මෙය ඉදිරිපත් කිරීම () පෝරමයෙන් පිටත ද ක්‍රියා කරයි, එබැවින් ඔබේ කේතයේ ඉතිරි කොටසෙහි දෝෂයක් සිදුවුවහොත් ඔබ "වෙනස්කම් සුරකින්න" යනුවෙන් සබැඳි බොත්තමක් මත තැබුවහොත් පෝරමය ඉදිරිපත් නොවේ.

වලංගු කිරීම සඳහා සේවාදායක පැත්තට යැවීම සඳහා දත්ත එක්රැස් කිරීම සඳහා පමණක් පෝරමය වලංගු කිරීම සඳහා මෙම ශ්‍රිතය කිසි විටෙකත් භාවිතා නොකළ යුතු බව සලකන්න. එවැනි දුර්වල හා ස්කන්ධයෙන් පවරා ඇති කේතයක් භාවිතා කිරීමෙන් XSS යනාදිය ඇති වේ.

මට මෑතකදී එකම ගැටලුවක් ඇති වූ අතර එළියට ආවා මෙම .toJSON jQuery ප්ලගිනය අතර එය එකම ව්‍යුහයක් සහිත ආකෘති පත්රය JSON වස්තුවක් බවට පරිවර්තනය කරයි. ගතිකව ජනනය කරන ලද ආකෘති සඳහාද මෙය විශේෂයෙන් ප්‍රයෝජනවත් වේ, එහිදී ඔබට විශේෂිත ස්ථානවල තවත් ක්ෂේත්‍ර එකතු කිරීමට ඔබේ පරිශීලකයාට ඉඩ දිය යුතුය.

කාරණය වන්නේ ඔබට ඇත්ත වශයෙන්ම පෝරමයක් තැනීමට අවශ්‍ය නිසා එය ව්‍යුහයක් ඇති බැවින් පරිශීලකයා නගරයේ ඔහුගේ ප්‍රියතම ස්ථාන ඇතුළු කරන පෝරමයක් සෑදීමට ඔබට අවශ්‍ය යැයි කියමු: මෙම පෝරමය <places>...</places>XML මූලද්‍රව්‍යයක් නියෝජනය කිරීමට ඔබට සිතාගත හැකිය පරිශීලකයා කැමති ස්ථාන ලැයිස්තුවක් මඟින් <place>...</place>එක් එක් <name>...</name>මූලද්‍රව්‍ය, <type>...</type>මූලද්‍රව්‍යයක් සහ පසුව <activity>...</activity>එවැනි ස්ථානයක ඔබට කළ හැකි ක්‍රියාකාරකම් නිරූපණය කිරීම සඳහා මූලද්‍රව්‍ය ලැයිස්තුවක් අඩංගු වේ. එබැවින් ඔබේ XML ව්‍යුහය මේ ආකාරයට වනු ඇත:

<places>

    <place>

        <name>Home</name>
        <type>dwelling</type>

        <activity>sleep</activity>
        <activity>eat</activity>
        <activity>watch TV</activity>

    </place>

    <place>...</place>

    <place>...</place>

</places>

මෙම නිශ්චිත ව්‍යුහය නිරූපණය කරන JSON වස්තුවක් මෙයින් පිටතට ගෙන ඒම කෙතරම් සිසිල්ද, එවිට ඔබටද මෙය කළ හැකිය:

• මෙම වස්තුව ඕනෑම CouchDB හා සමාන දත්ත ගබඩාවක ඇති ආකාරයට ගබඩා කරන්න
• ඔබගේ $ _POST [] සේවාදායක පැත්තෙන් එය කියවා නිවැරදිව කැදැලි අරාව ලබා ගන්න එවිට ඔබට අර්ථාන්විතව හැසිරවිය හැකිය
• හොඳින් සකසන ලද XML ගොනුවක් බවට පරිවර්තනය කිරීම සඳහා සමහර සේවාදායක පාර්ශවීය ස්ක්‍රිප්ට් භාවිතා කරන්න (ඔබ එහි නිශ්චිත ව්‍යුහය a-priri නොදැන සිටියත්)
• ඕනෑම Node.js වැනි සේවාදායක ස්ක්‍රිප්ටයක ඇති ආකාරයට එය කෙසේ හෝ භාවිතා කරන්න

හරි, එබැවින් දැන් අප සිතිය යුත්තේ පෝරමයකට XML ගොනුවක් නිරූපණය කරන්නේ කෙසේද යන්නයි.

ඇත්ත වශයෙන්ම <form> ටැගය යනු root, නමුත් අපට එය තිබේ<place> මූලද්‍රව්‍යය ඇත්තේ බහාලුමක් මිස දත්ත මූලද්‍රව්‍යයක් නොවේ, එබැවින් අපට ඒ සඳහා ආදාන ටැගයක් භාවිතා කළ නොහැක.

<fieldset>ටැගය ප්‍රයෝජනවත් වන ස්ථානය මෙන්න ! අපි භාවිතා කරමු<fieldset>අපගේ පෝරමයේ / එක්ස්එම්එල් නිරූපණයෙහි ඇති සියලුම බහාලුම් අංග නිරූපණය කිරීමට ටැග් , එබැවින් මෙවැනි ප්‍රති result ලයක් ලබා ගැනීම:

<form name="places">

    <fieldset name="place">

        <input type="text" name="name"/>
        <select name="type">
            <option value="dwelling">Dwelling</option>
            <option value="restoration">Restoration</option>
            <option value="sport">Sport</option>
            <option value="administrative">Administrative</option>
        </select>

        <input type="text" name="activity"/>
        <input type="text" name="activity"/>
        <input type="text" name="activity"/>

    </fieldset>

</form>

ඔබට මෙම පෝරමයේ දැකිය හැකි පරිදි, අපි අද්විතීය නම් වල රීතිය බිඳ දමමු, නමුත් මෙය හරි නිසා ඒවා මූලද්‍රව්‍ය සමූහයක් බවට පරිවර්තනය වනු ඇත, එබැවින් ඒවා යොමු කරනු ලබන්නේ අරාව තුළ ඇති ඔවුන්ගේ දර්ශකයෙන් පමණි.

මෙම අවස්ථාවේදී ඔබට නොපවතින ආකාරය දැක ගත හැකිය name="array[]" , පෝරමය තුළ සමාන නමක් සහ සෑම දෙයක්ම ලස්සන, සරල හා අර්ථාන්විත බව .

දැන් අපට අවශ්‍ය වන්නේ මෙම පෝරමය JSON වස්තුවක් බවට පරිවර්තනය කිරීමයි.

{'places':{

    'place':[

        {

            'name': 'Home',
            'type': 'dwelling',

            'activity':[

                 'sleep',
                 'eat',
                 'watch TV'

            ]

        },

        {...},

        {...}

    ]

}}

මෙය සිදු කිරීම සඳහා මම මෙම jQuery ප්ලගිනය මෙහි සංවර්ධනය කර ඇති අතර මෙම කේත සමාලෝචන ත්‍රෙඩ් එකෙහි ප්‍රශස්තිකරණය කිරීමට යමෙකු උදව් කළ අතර මේ වගේ ය:

$.fn.toJSO = function () {
    var obj = {},
        $kids = $(this).children('[name]');
    if (!$kids.length) {
        return $(this).val();
    }
    $kids.each(function () {
        var $el = $(this),
            name = $el.attr('name');
        if ($el.siblings("[name=" + name + "]").length) {
            if (!/radio|checkbox/i.test($el.attr('type')) || $el.prop('checked')) {
                obj[name] = obj[name] || [];
                obj[name].push($el.toJSO());
            }
        } else {
            obj[name] = $el.toJSO();
        }
    });
    return obj;
};

මමත් මේ එක බ්ලොග් පෝස්ට් එකක් කළාමෙය තවත් පැහැදිලි කිරීම සඳහා .

මෙය සෑම දෙයක්ම ස්වරූපයෙන් JSON බවට පරිවර්තනය කරයි (ගුවන්විදුලිය සහ චෙක් පෙට්ටි පවා) ඔබට කිරීමට ඉතිරිව ඇත්තේ ඇමතුම පමණි

$.post('script.php',('form').toJSO(), ...);

ආකෘති JSON වස්තු බවට පරිවර්තනය කිරීමට බොහෝ ක්‍රම ඇති බව මම දනිමි . බොහෝ අවස්ථාවන්හිදී එය නිසැකවම .serialize()හා .serializeArray()හොඳින් ක්‍රියාත්මක වන අතර ඒවා බොහෝ දුරට භාවිතා කිරීමට අදහස් කර ඇත, නමුත් අර්ථවත් නම් සහිත XML ව්‍යුහයක් ලෙස පෝරමයක් ලිවීම සහ එය a බවට පරිවර්තනය කිරීමේ මෙම සම්පූර්ණ අදහසම මම සිතමි . හොඳින් සාදන ලද JSON වස්තුව උත්සාහ කිරීම වටී, එසේම ඔබට ගතිකව ජනනය කරන ලද ආකෘති දත්ත නැවත ලබා ගැනීමට අවශ්‍ය නම් කරදර නොවී එකම නම ආදාන ටැග් එක් කළ හැකිය.

මම හිතනවා මේක කෙනෙකුට උදව් කරයි කියලා!

මම පෝරමයක් බහුමාධ්‍ය ජාවාස්ක්‍රිප්ට් වස්තුවකට කේතනය කළේ එය නිෂ්පාදනයේදී භාවිතා කිරීමටයි. ප්‍රති result ලය වන්නේ https://github.com/serbanghita/formToObject.js .

තවත් පිළිතුරක්

document.addEventListener("DOMContentLoaded", function() {
  setInterval(function() {
    var form = document.getElementById('form') || document.querySelector('form[name="userprofile"]');
    var json = Array.from(new FormData(form)).map(function(e,i) {this[e[0]]=e[1]; return this;}.bind({}))[0];
    
    console.log(json)
    document.querySelector('#asJSON').value = JSON.stringify(json);
  }, 1000);
})

<form name="userprofile" id="form">
  <p>Name <input type="text" name="firstname" value="John"/></p>
  <p>Family name <input name="lastname" value="Smith"/></p>
  <p>Work <input name="employment[name]" value="inc, Inc."/></p>
  <p>Works since <input name="employment[since]" value="2017" /></p>
  <p>Photo <input type="file" /></p>
  <p>Send <input type="submit" /></p>
</form>

JSON: <textarea id="asJSON"></textarea>

FormData: https://developer.mozilla.org/en-US/docs/Web/API/FormData

මම සැමුවෙල් අනුවාදයට කැමතියි, නමුත් එය කුඩා දෝෂයක් ඇති බව මම විශ්වාස කරමි. සාමාන්‍යයෙන් JSON ලෙස යවනු ලැබේ

core "coreSKU": "PCGUYJS", "name_de": "ඕනෑම දෙයක්", ...

එසේ නොවේ

[core "coreSKU": "PCGUYJS"}, {"name_de": "ඕනෑම"}, ...

එබැවින් IMO ශ්‍රිතය කියවිය යුතුය:

App.toJson = function( selector ) {
    var o = {};
    $.map( $( selector ), function( n,i )
    {
        o[n.name] = $(n).val();
    });     
    return o;
}

(සාමාන්‍යයෙන් අපේක්ෂා කළ පරිදි) එය දත්ත අරාව තුළට ඔතා, අවසානයේ එය ඇස්ට්‍රිං App.stringify ලෙස යවන්න ({data: App.toJson ('#cropform: input')})

කෙට්ටු අනුවාදය සඳහා 3593046 ප්‍රශ්නය දෙස බලන්න , සෑම සිදුවීමකින්ම ආවරණය වන අනුවාදය සඳහා json2.js හි . එය සියල්ල ආවරණය කළ යුතුය :)

ඉක්මන්, නවීන විසඳුමක් සඳහා, JSONify jQuery ප්ලගිනය භාවිතා කරන්න . පහත උදාහරණය GitHub README වෙතින් වාචිකව ගනු ලැබේ. සියලු ගෞරවය ප්ලගිනයේ කර්තෘ කුෂල් පාණ්ඩ්‍යාට ය.

ලබා දී ඇත්තේ:

<form id="myform">
    <label>Name:</label>
    <input type="text" name="name"/>
    <label>Email</label>
    <input type="text" name="email"/>
    <label>Password</label>
    <input type="password" name="password"/>
</form>

ධාවනය:

$('#myform').jsonify();

නිෂ්පාදනය:

{"name":"Joe User","email":"joe@example.com","password":"mypass"}

ඔබට මෙම JSON වස්තුව සමඟ jQuery POST කිරීමට අවශ්‍ය නම්:

$('#mybutton').click(function() {
    $.post('/api/user', JSON.stringify($('#myform').jsonify()));
}