jquery는 키 값 쌍을 바인딩합니다.

안녕하세요. 내 애플리케이션에 스프링 MVC를 사용하고 있습니다. 서비스는 다음과 같은 json 응답을 반환합니다.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와 아약스 호출을 사용하여 드롭 다운 메뉴로 바인딩?

출처

2012-01-03 Poppy

보켄처럼 보입니다. 완전한 코드를 입력하십시오. – Diode

몇 가지 방법으로 해결책을 알려 드리겠습니다. 그냥 HTML 코드를 말해. 내 생각에, jQuery에 대한 코드는 여기에 존재하지 않는다 : ( –

좋아, 결국 나는 여기에 해결책이있다. .. 나는 피들도 예제로 포함시켰다. 나는 당신이 이번에 행복 할 것이라고 확신한다. :) –

메시지의 개체 배열을 전달하고 있습니다.

대신지도를 전송하는 것이 좋습니다. 그 값은 바로 { key1:"value1", key2:"value2"}입니다. 이와

당신은 당신이 옵션이 무엇인지 #sampleResp?, 무엇을 (충분한 정보를 제공하지 않았다 렸기 때문에 나는이 코드를 테스트 할 수 없습니다이

$.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는 키 값 쌍을 바인딩합니다.

답변

관련 문제