html表单数组转换为JSON

html form array to JSON

本文关键字：JSON 转换 数组 表单 html      更新时间：2023-09-26

我有一个包含多个值的动态html表单，我需要的是将表单数据添加到JSON中，并将其发布到php页面以插入到mysql中。

形式：

<input type="text" name="name[]" id="p" />
<input type="text" name="manuf[]" id="k" size="3" />
<input type="text" name="item_pr[]" id="ka" size="10" />
<input type="text" name="price" id="su" size="10" disabled="disabled"/><br />

首先尝试创建JS数组，但无法理解如何在一个代码行中获取所有值，以及如何转换为json并发布到php:

var elementai = document.getElementsByName('name[]');
          for (var i = 0, j = elementai.length; i < j; i++) {
          var elementas = elementai[i];
          alert(elementas.value);
          }

好吧，您可以使用jQuery，因为它易于使用，编写的代码更少。尽管我在这里给出了两种解决方案。

在JavaScript中：

$.fn.extractObject = function() {
  var accum = {};
  function add(accum, namev, value) {
    if (namev.length == 1)
      accum[namev[0]] = value;
    else {
      if (accum[namev[0]] == null)
        accum[namev[0]] = {};
      add(accum[namev[0]], namev.slice(1), value);
    }
  }; 
  this.find('input, textarea, select').each(function() {
    add(accum, $(this).attr('name').split('.'), $(this).val());
  });
  return accum;
}
// ...
var object = $('#testformId').extractObject();
console.log(object);

​以下是演示：http://jsfiddle.net/G2XVq/

在jQuery中：

$.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;
};
$(function() {
    $('form').submit(function() {
        $('#result').text(JSON.stringify($('form').serializeObject()));
        return false;
    });
});​

（jQuery部分取自此处）

以下是演示：http://jsfiddle.net/sxGtM/3/

用于通过javascript:将数据发布到php

 var str_json = JSON.stringify(myObject) //gives me the JSON string.
// AJAX XMLHttpRequest object in Javascript to send data to the server:
request= new XMLHttpRequestObject()
request.open("POST", "Phppage.php")
request.setRequestHeader("Content-type", "application/json", true)
request.send(str_json)

下面的解决方案利用jQuery中的.map（）函数来最大限度地减少准确达到所需结果所需的代码量。

HTML:

<input type="text" name="name" id="p" /> 
<input type="text" name="manuf" id="k" size="3" /> <input type="text" name="item_pr" id="ka" size="10" /> 
<input type="text" name="price" id="su" size="10" disabled="disabled"/>
<br /> 
<input type="button" id="go" value="Go >>" onclick="createJSONObject()" />

jQuery:

function createJSONObject(){
    var formValues = $('input[type=text]');
    var obj = {};
    $.map(formValues, function(n, i) {
        obj[n.name] = $(n).val();
    });
    console.log(JSON.stringify(obj));
}

演示：http://jsfiddle.net/mBLkH/

上面的代码创建了input元素的jQuery对象，然后将每个元素的name属性和value映射到obj对象变量。然后，它利用JSON.stringify(obj)将对象格式化为可查看的上下文。

jQuery在这个问题上做得太过火了。

证明：http://jsfiddle.net/iambriansreed/nTnhW/

纯JavaScript:

var input_ids = ['p','k','ka','su'];
for (var i = 0, j = input_ids.length; i < j; i++) {
    var element = document.getElementById(input_ids[i]);
    alert(element.value);
}​

如果您只想获得文本输入，并且您知道表单的id:

var inputs = document.getElementById('myForm').getElementsByTagName('input');
var params = {};
for(var i=0; i < inputs.length; i++){
    var curr = inputs[i];
    if(curr.getAttribute('type')==='text')){
        params[curr.getAttribute('name')] = curr.value;
    }
}

使用jQuery发布：

$.post('myUrl',params,function(data){ console.log(data); });

或者使用直接的javascript：https://stackoverflow.com/a/8567146/1081941

相关文章：