jqueryはキー値ペアをバインドします

こんにちは私は自分のアプリケーションでspring mvcを使用しています。サービスは、jqueryはキー値ペアをバインドします

[{"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>

値フィールドはアイテムであり、それは次の形式を有する：

I応答を結合するために使用するコードである { "Key1": "value1"} SampleRespは、ドロップダウンリストのIDです。

JSPコードは次のようになります。

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

がどのように応答から値のみの部分を抽出し、jqueryのでAJAX呼び出しを使用して、ドロップダウンにそれをバインドしますか？

出典

2012-01-03 Poppy

ボケのように見えますが、完全なコードを入力してください。 – Diode

私はあなたにいくつかの部分でソリューションを提供します。 HTMLコードを伝えるだけです。私は、jQueryのコードはここに存在しないと思う:( –

大丈夫だからここで私は解決策と答えている..私は例としてもフィドルを含めている：私はあなたがこの時間に幸せになると確信しています:) –

メッセージのオブジェクトの配列を渡しています。

代わりに地図を送信してください。その値はちょうど{ key1:"value1", key2:"value2"}の範囲内です。これにより

あなたはちょうどあなたがオプションで何#sampleResp？何であるか（十分な情報を提供しなかったbecouse私は、このコードをテストすることはできません。この

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

出典

2012-01-03 09:05:01

のような値にアクセスすることができます？何あるMSG）

私の推測です：？

new Option(item[0]);

それはにconsole.logのための情報を提供動作しない場合（MSG）

出典

2012-01-03 09:05:56 kaz

JavaScriptには、JSONテキスト文字列をDOMのオブジェクトに変換する関数eval()があります。ここで、すべての変数とその値にアクセスできます。

一方、Ajax経由で呼び出してそのJSON文字列を受け取っている場合は、オプションを$.ajax()関数に追加するだけで自動的にハンドラ関数内にオブジェクトが作成されます。

<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>

：ここに同じ

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

出典

2012-01-03 09:13:27 jlledom

の作業のコードを実行するため

$.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()を使用することができますファイル内のJSONコンテンツが以下のフォーム：

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

出典

2012-01-03 09:33:25

さて、ここでその解決策がある、

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

フィドル：http://jsfiddle.net/Bzf7j/

出典

2012-01-03 10:07:45

これはバインドドロップダウンの全体のキー値のペア{"key1"： "value1"}。しかし私は私のドロップダウンで値1の部分だけを追加する必要があります – Poppy

大丈夫ですので、ここで私は解決策です。答えをチェックしてください。私は例としてフィドルも含めました。私はあなたが今度は幸せになると確信しています。 :) –

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"); 
      }); 
     } 
    }); 
});

出典

2013-06-09 03:05:18

jqueryはキー値ペアをバインドします

答えて

関連する問題