Json 객체를 가져 와서 Jquery를 사용하여 페이지에 표시합니다.

Question

동적 URL (http://domain.com/getUsers.php?team=1)은 수동으로 액세스하면 브라우저에서 일부 Json 객체를 반환합니다.

[{"id":1,"name":"George"},{"id":2,"name":"John"}] 

* getUsers.php에 대한 액세스 권한이 없으므로이 파일을 편집 할 수 없습니다. * 브라우저에서이 파일의 소스 코드를 보면 제목, 본문 등 다른 HTML 관련 태그없이 순수한 json 객체 만 얻을 수 있습니다.

json 요소를 모두 드롭 다운 메뉴에서 다른 페이지 (http://domain.com/index.html).

<form> 
<select name="users"> 
<option value="">Select a person:</option> 
<option value="1">George</option> 
<option value="2">John</option> 

</select> 
</form> 

Jquery를 사용하여 가장 좋은 방법은 무엇입니까? 데이터를 검색하고 표시하기 위해 index.html 페이지에 넣어야하는 Jquery 코드는 무엇입니까?

감사합니다.

Answer 1

기본적으로 트릭은받는 JSON 개체를 반복하고 요소를 사용하여 요소를 만드는 것입니다.

다음은이 작업을 수행 할 수있는 방법의 예 (여기에 바이올린입니다 : http://jsfiddle.net/ruv3M/를)

// This is to simulate the JSON you retrieved via an AJAX call 
var people = [{"id":1,"name":"George"},{"id":2,"name":"John"}], 
    // Save a reference to your list of users 
    $userSelect = $('#userlist').find('select'); 

// Iterate over each item in the object of people you received 
for (person in people) { 
    // create an option for each person 
    $('<option />', { 
     value: people[person].id, 
     text: people[person].name 
    }) 
     // Append it to your list 
     .appendTo($userSelect); 
} 

업데이트 : JSON 데이터가 $.getJSON() 함께에 대한 AJAX 호출을하는 가장 간단한 방법. 코드에서 (Documentation)

는, 아마 다음과 같이 보일 것입니다 :

// Instead of '/echo/json/', you'd use your AJAX URL 
$.getJSON('/echo/json/', function(data) { 
    // Set data equal to our dummy people variable, since it's blank in this example 
    // NOTE! This step would be unnecessary in real life, where data would already be your JSON 
    data = people; 

    // Iterate over each item in the object of people you received 
    // Note: iteration should be inside this callback, so it doesn't fire till your 
    // data has been returned. 
    for (person in people) { 
     // create an option for each person 
     $('<option />', { 
      value: people[person].id, 
      text: people[person].name 
     }) 
      // Append it to your list 
      .appendTo($userSelect); 
    } 

}); 

http://jsfiddle.net/B2YF5/3/