2

我有一个包含多个值的动态 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);
          }
4

4 回答 4

4

好吧，您可以使用 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)
于 2012-07-10T18:22:48.000 回答
2

下面的解决方案利用 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/

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

于 2012-07-10T18:18:26.307 回答
0

如果您只想获取文本输入并且知道表单的 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

于 2012-07-10T18:47:00.557 回答
0

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);
}​
于 2012-07-10T18:30:05.447 回答