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

Append JSON output to input box and label one by one

本文关键字：输出 JSON 输入      更新时间：2023-09-26

我有类似的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>

是否可以？以及如何做到这一点。因为到目前为止，我还不能分解它，总是出现在一个输入框中。

您需要从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>");
     }
});
相关文章：