jquery와 ajax를 사용하여 버튼 클릭으로 페이지의 이미지를 변경하려면 어떻게해야합니까?

Question

내 HTML 페이지에 버튼을 클릭하면 내 페이지의 특정 이미지를 비동기 적으로 변경하고 싶습니다. 그래서 내가 좋아하는 뭔가가 있습니다

<a href="/test/page"> button </a> 

을 그리고 나는 여기에 내 이미지를 변경하려면 : 나는 아약스 여기에 사용하는 가정하자라고 생각

<div id="container" style="display: none"> 
    <img src="/test/image.png" /> 
</div> 

을하지만 난 웹 개발에 매우 ​​새로운 오전 나는 잘 모르겠다. 그리고 제안은 감사 할 것이다.

참고 : 새 페이지를로드하지 않고 이미지를 다시로드하기 만하면됩니다.

Answer 1

$('a').click(function(e){ 
    e.preventDefault(); 

    $('img').attr("src","newURL"); 
}); 

나는 JQuery와 및 JQuery와 - UI API 문서를 찾고 시작할 것이라고

Answer 2

는

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

http://jqueryui.com/demos/button/

당신이 원하는 것은 Ajax 호출 다시를 만들 것입니다 제출 버튼입니다 - 특정 div를로드하십시오.

아약스에 대한 질문은 이미지를 가져 오는 위치입니다. 백엔드 서버의 경우 ajax 호출을 사용해야합니다. 그러나 클라이언트의 모든 경우에 그냥 일반 자바 스크립트 호출을 할 수 있습니다.

몇 백 엔드 서버

<script> 
$(function() { 
    $("input:submit", ".demo").button(); 
    $("a", ".demo").click(function() { 
      $.ajax({ 
       url: "some url call to get image", 
       data: " any data you want passed", 
       success: function(html) { 
         $("#demo").html(html); // html you want reloaded for the div. 
       } 
    }); 
}); 
</script> 



<div class="demo"> 


<input type="submit" value="A submit button"> 



</div><!-- End demo --> 

Answer 3

에 아약스 호출로 버튼을 거친 예를 어떻게 우리가이 일에 AJAX를 사용하지 않습니다에 대해?

HTML :

<a href="#" class="imageChanger" data-imgsrc="/link/new/image.jpg"> Press me </a> 
<a href="#" class="imageChanger" data-imgsrc="/link/new/image23.jpg"> Press me too! </a> 
<div id="container"> 
    <img src="lalala.jpg"> 
</div> 

JS는 : 작동되지 않을 수도 있습니다

$(function() { 
    $(document).on("click", ".imageChanger", function(e) { 
    e.preventDefault(); 

    newSrc = $(this).data("imgsrc"); 

    $("#container").empty().append('<img src=" ' + newSrc + ' ">'); 

    }); 
}); 

이 머리에서 입력됩니다. 아침에 확인해 볼게.

Answer 4

var counter = 1; 
$(function() { 
var imgArray = 
new Array("slide/1.jpg","slide/2.jpg","slide/3.jpg","slide/4.jpg"); 
$(document).on("click", "#btnSubmit", function(e) { 
e.preventDefault(); 
if(counter>=imgArray.length) 
{ 
counter=0; 
} 
newSrc = imgArray[counter++];// $(this).data("imgsrc"); 
$("#container").empty().append('<img src=" ' + newSrc + ' " class="image-1-1" width="100%" height="400">'); 

}); 
}); 

HTML 당신이 그것을 변경하고자하는 일

<div id="container" class="coffee-span-8 column-1"> 
<img src="/slide/1.jpg" class="image-1-1" width="100%" height="400" ></img> 
</div> 
<div class="coffee-span-6"><form METHOD="LINK" ACTION="index.html"> <button id="btnSubmit" type="submit">next</button></FORM> 
</div>