如何从 $.ajax() 成功回调中访问和输出 json 结果

Question

我正在使用coldfusion 和jquery。这是我在 jquery 的第一次真正尝试，我已经搜索和阅读了很长时间而没有破解它，所以任何帮助将不胜感激......

好的，我有一个返回 id 的自动完成功能。然后我将 id 传递给返回数据类型 json 数组的第二个函数。自动完成效果很好，我可以让 json 显示在警报框中，但我有点卡在如何使用 json 结果上。

我正在尝试遍历 json 数组并将值写入单选按钮，然后在页面上动态显示...所以整个想法是这样的。

1. 从下拉框中选择用户并返回ID
2. 选择的用户 id 被传递给用户选项函数，用户选项在 json 数组中返回。
3. 循环遍历 json 数组，每次迭代都会创建一个带有适当值的单选按钮。
4. 然后将所有单选按钮输出到屏幕以供访问和选择。

到目前为止我的代码是这样的：

<script type="text/javascript">
 // <!--
 $(document).ready(function() {
    $("#userName").autocomplete({
        cache:false,
        source: "/jqueryui/com/autocomplete.cfc?method=getUser&returnformat=json",
        //setup hidden fields
        select:function(event,ui) {
            var uid = ui.item.id;
            $("#userid").val(ui.item.id);


            // start call to get user options
             $.ajax({
                 type: "POST",
                 url: "/jqueryui/com/autocomplete.cfc?method=getUserOptions&returnformat=json",
                 data: ({ userid: uid }),
                 success: function(data) {              
                    alert(data)
                    }
                 });
            /// end call to get user options
        }
    });
});
// --->

</script>

“alert(data)”弹出窗口中显示的json，看起来不错，是这样的：

[{"productname":"licence free","quantity":1,"term":12,"id":1},
{"productname":"licence basic","quantity":1,"term":24,"id":1},
{"productname":"licence full","quantity":1,"term":12,"id":2}]

我需要知道如何遍历这些数据并为每个选项创建一个单选按钮，可能是这样的，并将它们全部显示在屏幕上，我猜我只会通过 dom 写一次我有东西要写：

<input type="radio" name="userOption" value="#id#|#qty#|#term#">#productname#

我尝试了一些东西，但没有成功，例如：

for(var i =0;i<Data.length-1;i++) 
{ 
  var item = Data[i]; 
  alert(item.productname + item.id); 
} 

还有

$.each(data.items, function(i,item){      
    alert(item);      
    if ( i == 3 ) return false;    
    });

我无法让其中任何一个工作。

无论如何，这有点冗长。希望它很清楚，再次感谢任何帮助或建议。

谢谢！

Answer 1

首先检查返回的data 参数的数据类型。您可能首先需要使用 .parseJSON() 来构造 JSON 对象。

那么您的for 循环语法不正确。这段代码对我有用：

var data = [{"productname":"licence free","quantity":1,"term":12,"id":1},
            {"productname":"licence basic","quantity":1,"term":24,"id":1},  
            {"productname":"licence full","quantity":1,"term":12,"id":2}];

for (var i=0; i<data.length; i++) {
    alert(data[i].productname);
}

这是jsfiddle

Answer 2

尝试检查parseJSON jquery 函数。

Answer 3

我怀疑类型是字符串？如果是这样，请尝试使用 javascript 函数 eval。它将字符串转换为 javascript 类型。在您的情况下，这样的事情应该可以工作：

Var new_data = eval(data);

现在它应该是一个可行的数组/对象

编辑：保留数据变量：

data = eval(data);

编辑 2：

您的 ajax 调用错过了 dataType 属性：

dataType: "json"

有了这个你就不需要我上面说的东西了

Answer 4

使用 each 循环获取数据并使用 appendTo 函数在带有 result1 id 的 HTML 元素中打印数据：

dataType:"json", //nature of returned data
success: function(data) {
    var  content = ''; 

    $.each(data, function(i, dbdata) {
        content += '<p>' + dbdata.columnName + '<p>';
    });

    $(content).appendTo("#result1");
}