将JSON输出附加到输入框并逐个标记

时间:2015-12-16 05:24:31

标签: javascript jquery json ajax

我有像JSON这样的输出

{"name":"blue tshirt","category":"t-shirt","size":"XS,S,M,L,XL"}

此代码的输出来自

$parameters = array(':id'=>$id);
$so_result = $this->ModelProduct->GetData($parameters);
print_r (json_encode($so_result,true));

我使用ajax附加输出/结果

    var data={id:id};
    $.ajax({
        type:"GET",
        datatype:"json",
        url:"",
        data:data,
        cache:false,
        success: function(data) {
                $('#name').val(data);
        }
    });
return false;

我以这样的形式赢得了结果展示

Name : <input type="text" id="name" value="blue tshirt" >
Category : <input type="text" id="category" value="t-shirt">
Size : 
<label>XS</label>
<label>S</label>
<label>M</label>
<label>L</label>
<label>XL</label>
是否可以?以及如何做到这一点。因为直到现在我无法将其分解并始终出现在一个输入框中。

1 个答案:

答案 0 :(得分:1)

您需要从JSON中获取特定属性并分配给您的DOM元素。将你的ajax部分改为

$.ajax({
        type:"GET",
        datatype:"json",
        url:"",
        data:data,
        cache:false,
        success: function(data) {
                data = JSON.parse( data );
                $('#name').val(data.name);
                $('#category').val(data.category);
                var sizes  = data.size.split( "," );
               for(var counter  = 0; counte < sizes.length; counter++)
               {
                  $('#category').parent().append("<label>" + sizes[ counter ] + "</label>");
               }
        }
    });

或只是

$.getJSON( "url", function( data ) {
     alert(data);//to check the data first
     $('#name').val(data.name);
     $('#category').val(data.category);
     var sizes  = data.size.split( "," );
     for(var counter  = 0; counte < sizes.length; counter++)
     {
        $('#category').parent().append("<label>" + sizes[ counter ] + "</label>");
     }
});