Question

您好我在我的应用程序中使用spring mvc。该服务返回一个json响应，如

[{"Key1": "value1"}]

我只需要将响应中的值部分绑定到jquery对话框中的下拉列表。我使用AJAX调用来获取项目列表并绑定它。但它将下拉列表中的整行绑定，而不是值。

我用来绑定响应的代码是：

<script type="text/javascript">
$(function() {
    $.ajax({
        type : "GET",
        url : "countries/getname",
        contentType : "application/json; charset=utf-8",
        dataType : "json",
        success : function(msg) {
            alert("MSG:"+msg);//this gives {"Key1": "value1"}
            $.each(msg,function(key, val) {
                alert("KEY::"+key); //key is returned as 0
                alert("VALUE::"+val); //value is returned as{"Key1": "value1"}
                $('<option />', {value: key, text: val}).appendTo("#sampleResp");
            });
        },
        error : function() {
            $("#sampleResp").get(0).options.length = 0;
            $("#sampleResp").get(0).options[0] = new Option("None", "None");
        }
    });
});
</script>

值字段是项目，它具有以下形式： { "Key1": "value1"} SampleResp是下拉列表的ID。

jsp代码如下所示：

<div>
    <form:select path="sampleResp" cssClass="w200">                     
    </form:select>
</div>

如何从响应中仅提取值部分并使用jquery中的ajax调用将其绑定到下拉列表中？

Answer 1

您正在传递消息中的对象数组。

为什么不发送地图而不是{ key1:"value1", key2:"value2"}内的值。

通过这个你可以访问像这样的值

$.each( msg, function(k, v)
{
   alert( "Key: " + k + ", Value: " + v );
});

Answer 2

我无法测试此代码，因为你没有提供足够的信息（什么是#sampleResp ?,什么是Option？，什么是msg？）

我的猜测是：

new Option(item[0]);

如果不起作用，请提供console.log（msg）的信息

Answer 3

JavaScript具有eval()函数，可将JSON文本字符串转换为DOM的对象，您可以在其中访问所有变量及其值。

另一方面，如果您通过Ajax调用接收到该JSON字符串，只需在dataType:"json"函数中添加$.ajax()选项就会自动在处理函数中创建一个对象。

$.ajax({
    url:'someUrl',
    dataType: 'json',
    success: handleData
});

function handleData(jsonObj) {
    var key1=jsonObj.key1;
    //key 1 now is "value1"
}

http://api.jquery.com/jQuery.ajax/

事实上，您也可以使用函数$.getJSON()作为执行相同

的简单方法

http://api.jquery.com/jQuery.getJSON/

Answer 4

此处的工作代码：

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
    $.ajax({
        url:'url_of_json_file',
        dataType: 'json',
        success: createDropDown
    });
    $.each(data[0], function(key, val) {
        items.push('<option id="' + key + '">' + val + '</option>');
    });
    $("#dropDown").append(items.join('')); 
});
</script>
</head>
<body>
All JSON values in drop down.
    <select id="dropDown">
    </select>
</body>
</html>

假设文件中的JSON内容具有以下形式：

[{ 
"Key1": "value1",
"key2":"value2"
}]

Answer 5

那么这就是解决方案，

success : function(msg) {
      $.each(msg, function(index, elem) {
         $.each(elem, function(key, value){
            $('<option value="'+value+'">'+value+'</option>').appendTo($("#sampleResp"));
         });
    });
 }

小提琴：http://jsfiddle.net/Bzf7j/

Answer 6

<强> Working jsFiddle Demo

如果您在警报中收到此结果：

alert(msg);
// {"Key1": "value1"}

这意味着您的服务器响应是字符串，因此您必须将其解析为JSON：

msg = JSON.parse(msg);
alert(msg);
// [object Object]

现在，代码的其他部分是正确的：

$.each(msg,function(key, val) {
    $('<option />', {value: key, text: val}).appendTo("#sampleResp");
});

所以你的代码看起来像这样：

$(function() {
    $.ajax({
        type : "GET",
        url : "countries/getname",
        contentType : "application/json; charset=utf-8",
        dataType : "json",
        success : function(msg) {
            msg = JSON.parse(msg);
            $.each(msg,function(key, val) {
                $('<option />', {value: key, text: val}).appendTo("#sampleResp");
            });
        }
    });
});

jquery绑定一个键值对

6 个答案: