ajax를 사용하여 div 태그를 드롭 다운으로 업데이트하십시오.

Question

AJAX를 사용하여 div 태그를 업데이트하고 싶습니다. "표시"버튼을 클릭하면 드롭 다운 메뉴에 지정된 페이지로 AJAX 요청이 이루어집니다. 해당 페이지에 포함 된 JSON 객체는 "기타 페이지"라고 표시된 div 안에 표시됩니다. 나는 하나 이상의 JSON 파일을 사용할 것이다. 드롭 다운 메뉴를 사용하여 div 태그를 업데이트하려면 어떻게합니까?

JS :

이

function start() 
{ 
    $("#clickme").text("Calling server"); 

    $.ajax(
    { 
     url : "mikey.json", 
     success : callbackFunction, 
     error : errorFunction, 
     dataType : 'json' 
    }); 
} 

function callbackFunction(data, info) 
{ 
    $("#clickme") 
     .text("result: " + (data && data.name ? data.likes: "(No likes)")); 
} 

function errorFunction(data, info) 
{ 
    $("#clickme").text("error occurred:" + info); 
} 

HTML :

<div id="clickme" onclick="start()">Other page</div> 
<form method="post" id="frm"> 
    <table> 
     <tr> 
      <td>Current roommate: </td> 
      <td> 
       <select name="room" id="rooms"> 
        <option value="1" id="mi">Mikey</option> 
        <option value="2" id="sa">Sarah</option> 
        <option value="3" id="er">Sam</option> 
       </select> 
      </td> 
     </tr> 
     <tr> 
      <td></td> 
      <td> 
       <input type="submit" value="Display" > 
      </td> 
     </tr> 
    </table> 
</form> 

Answer 1

이 드롭 다운 목록을 통해 이벤트를 트리거하기 위해, 당신은 단순히이

$(document).ready(function() { 
    $('#rooms').on('change', function() { 
     var data = $(this).val(); //you can retrieve the drop down list value 
     start(); 
    }); 
} 

을 할 수 있고, 시작 방법에있어서, 당신이 할 수있는 아약스를 호출하고, 콜백 Success에서 div를 수정할 수 있습니다. (지금 당장)

Answer 2

선택 옵션에서 json 값을 지정하고 제출시 ajax 함수에 전달해야합니다.

HTML :

<div id="clickme">Other page</div> 
<form method="post" id="frm"> 
    <table> 
     <tr> 
      <td>Current roommate: </td> 
      <td> 
       <select name="room" id="rooms"> 
        <option value="mikey.json" id="mi">Mikey</option> 
        <option value="sarah.json" id="sa">Sarah</option> 
        <option value="sam.json" id="er">Sam</option> 
       </select> 
      </td> 
     </tr> 
     <tr> 
      <td></td> 
      <td> 
       <input type="submit" value="Display"> 
      </td> 
     </tr> 
    </table> 
</form> 

jQuery를 :

$(document).ready(function(){ 
    $("#frm").submit(function(event){ 
     event.preventDefault(); 
     var jsonUrl = $("#rooms").val(); 
     $("#clickme").text("Calling Server"); 
     $.ajax({ 
      url : jsonUrl, 
      data: $("#frm").serialize(), 
      dataType : 'json', 
      success: function (data) { 
       $("#clickme").text("result: " + (data && data.name ? data.likes: "(No likes)")); 
      }, 
      error : function(jqXHR, textStatus, errorThrown) { 
       $("#clickme").text("error occurred:" + errorThrown); 
      }, 
      dataType : 'json' 
     }); 
    }); 
}); 

당신은 사람이 옵션을 클릭 (대신 그들에게 양식을 제출 대기)되는 것과 DIV 변경하려는 경우, 다음을 수행 할 수 있습니다 :

$(document).ready(function(){ 
     $("#rooms").change(function(){ 
     var jsonUrl = $(this).val(); 
     $("#clickme").text("Calling Server"); 
     $.ajax({ 
      url : jsonUrl, 
      data: $("#frm").serialize(), 
      dataType : 'json', 
      success: function (data) { 
       $("#clickme").text("result: " + (data && data.name ? data.likes: "(No likes)")); 
      }, 
      error : function(jqXHR, textStatus, errorThrown) { 
       $("#clickme").text("error occurred:" + errorThrown); 
      }, 
      dataType : 'json' 
     }); 
    }); 
});