ajax를 사용하여 html 삽입

Question

일부 div 요소가있는 HAML 페이지가 있습니다. 버튼을 클릭하면 다른 페이지의 div에 삽입해야합니다. 어떻게해야합니까? 감사

Answer 1

을 사용하려는 경우 당신은 jQuery.com에서 jQuery 플러그인을 추가해야합니다. 플러그인을 다운로드하거나 js 파일의 http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js 링크를 src로 사용할 수 있습니다.

다음 follwing을 코드이 도움이

$(document).ready(function(){ 
    $("#your_button_Id").click(function(){ 
    $.ajax({ 
     url: "test.html", 
     context: document.body, 
     success: function(response){ 
     $('#div_Id').html(response); 
     } 
    }); 
    }); 
}); 

호프를 사용! 행복한 코딩.

Answer 2

시도의 $ ('DIV'). 부하 ('lol.HTML') 당신이 JQuery와에게

Answer 3

이 과정을 단순하게 꾸미려면 jQuery library을 페이지에 추가하십시오.

아래는 현재 페이지에 다른 페이지에서 데이터를로드 할 수 jQuery를 사용하는 예이다 :이 보안/XSS 문제에 대해 열립니다

inject_to = $("div#id"); // the div to load the html into 
load_from = "/some/other/page"; // the url to the page to load html from 
data = ""; // optional data to send to the other page when loading it 

// do an asynchronous GET request 
$.get(load_from, data, function(data) 
{ 
    // put the received html into the div 
    inject_to.html(data); 
} 

주, 나는 대신는 .text 사용하는 것이 좋습니다 것입니다. html을 사용하고 외부 페이지에서 일반 텍스트 만로드하십시오. jQuery를 아약스에 대한 자세한 정보 : 버튼을 클릭하면 http://api.jquery.com/category/ajax/

이 작업을 수행하려면, 다음과 같이 함수에 위의 코드를 넣어 :

function buttonClicked() 
{ 
    inject_to = $("div#id"); // the div to load the html into 
    load_from = "/some/other/page"; // the url to the page to load html from 
    data = ""; // optional data to send to the other page when loading it 

    // do an asynchronous GET request 
    $.get(load_from, data, function(data) 
    { 
     // put the received html into the div 
     inject_to.html(data); 
    } 
} 

그런 다음 버튼에 클릭 이벤트에 대한 이벤트 처리기를 추가 이 같은 :

의 jQuery 이벤트에

$("button#id").click(buttonClicked); 

정보 더 : http://api.jquery.com/category/events/