javascript - 将 li 输入值数据转换为 JSON

Question

你好，我需要保存多个值并使用 ajax 更新数据库。我正在使用 Yii 框架。

首先，我需要使用 ajax 作为 json 发送数据，但结果有误。

实时代码: http://jsfiddle.net/kxJwp/2/

我的 javascript 代码是:

$("#save").live('click', function(){
    var showtimes = [];
    var values = {};
    $('li inputs').each(function() {
        values[$(this).attr('name')] = $(this).val();
    });
    $('li').each(function(i) {
        showtimes[i]=values;
    });
    alert(JSON.stringify(showtimes));
});

Javascript 输出:

它输出最后一个 li 值 x li 的数量

输入:

<li>
    <input name="show_id" class="show_id att" type="hidden" value="" />
    <input name="movie_id" class="movie_id att" type="hidden" value="" />
    <input name="cinema_id" class="cinema_id att" type="hidden" value="" />
    <input name="status" class="status att" type="hidden" value="" />
    <input name="times" class="timesArray att" type="hidden" value="" />
<li>
<li>
    <input name="show_id" class="show_id att" type="hidden" value="" />
    <input name="movie_id" class="movie_id att" type="hidden" value="" />
    <input name="cinema_id" class="cinema_id att" type="hidden" value="" />
    <input name="status" class="status att" type="hidden" value="" />
    <input name="times" class="timesArray att" type="hidden" value="" />
<li>

Answer 1

你只看到一行，因为你只有一个对象，而你需要一个对象数组，所以先声明一个数组，然后继续向其中添加对象。像这样:

$("#save").live('click', function(){
  var showtimes = [];    // Create empty javascript array
  var objec={};
  $("li").find("input").each(function(index) {           // Iterate over inputs

    objec=new Object; // to create a new object for every matched element

    objec[$(this).attr('name')]=$(this).val()+'avla';
    showtimes[index]=objec;  // Add object to array
  });

  var json = JSON.stringify(showtimes);
  alert(json);
});

代码解释:使用内置 index of each() ，通过将索引传递给函数，例如:function(index){...}。

编辑:objec=new Object; 是为了避免获得重复的值，因为每次将相同的对象添加到数组中，但是使用 new 时，每次都会创建一个新对象，并且被添加到数组中。

更新:选择 li 的更好方法是使用选择器，例如:$("li:has(input)") 然后循环遍历 children :

$("#save").live('click', function(){
    var showtimes = [];
    var values = {};
    $("li:has(input)").each(function(i){
        values = new Object;
        $(this).children().each(function(){
            values[$(this).attr('name')]=$(this).val();
        });
        showtimes.push(values);
    });
    alert(JSON.stringify(showtimes));
});

编辑:上述两个示例中的输出(形成的数组)不同。

代码示例 1 的输出:

json=[{"show_id":"1avla"},{"movie_id":"2avla"},{"cinema_id":"3avla"},{"status":"4avla"},{"times":"5avla"},{"show_id":"6avla"},{"movie_id":"7avla"},{"cinema_id":"8avla"},{"status":"9avla"},{"times":"0avla"}]

代码示例 2 的输出:

json=[{"show_id":"1","movie_id":"2","cinema_id":"3","status":"4","times":"5"},{"show_id":"6","movie_id":"7","cinema_id":"8","status":"9","times":"0"}]