jQuery綁定鍵值對
[英]jquery binding a key value pair
問題描述
嗨，我在應用程序中使用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調用將其綁定到下拉列表中？
6 個解決方案
解決方案1
0
如果在警報中得到此結果：
alert(msg);
// {"Key1": "value1"}
這意味着您來自服務器的響應為string ，因此您必須將其解析為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");
});
}
});
});
解決方案2
0 2012-01-03 09:05:01
您正在傳遞消息中的對象數組。
您為什么不直接發送地圖，因為這些值僅在{ key1:"value1", key2:"value2"} 。
這樣您就可以訪問像這樣的值
$.each( msg, function(k, v)
{
alert( "Key: " + k + ", Value: " + v );
});
解決方案3
0 2012-01-03 09:05:56
我無法測試此代碼，因為您沒有提供足夠的信息（#sampleResp是什么？Option是什么？msg是什么？）
我的猜測是：
new Option(item[0]);
如果不起作用，請提供console.log（msg）的信息
解決方案4
0 2012-01-03 09:13:27
JavaScript具有eval()函數，該函數將JSON文本字符串轉換為DOM的對象，您可以在其中訪問所有變量及其值。
另一方面，如果通過Ajax調用接收到JSON字符串，則只需在$.ajax()函數中添加dataType:"json"選項，即可在處理函數中自動創建一個對象。
$.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()作為執行相同操作的簡單方法
解決方案5
0 2012-01-03 09:33:25
工作代碼在這里：
<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"
}]
解決方案6
0 2012-01-03 10:07:45
好了，這就是解決方案，
success : function(msg) {
$.each(msg, function(index, elem) {
$.each(elem, function(key, value){
$('<option value="'+value+'">'+value+'</option>').appendTo($("#sampleResp"));
});
});
}
小提琴： http : //jsfiddle.net/Bzf7j/
鍵值對Json轉換並轉換為Javascript / Jquery中的類
[英]Key-Value Pair Json transformation and conversion into a class in Javascript / Jquery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.