jQuery Ajax를 사용하는 링크의 내용로드

Question

페이지에 대한 href 링크가있는 -link 요소가 있지만 href -url에서 해당 내용을로드하고 해당 페이지로 사용자를 리디렉션하지 않기 위해 Ajax를 사용해야합니다. 링크에서 콘텐츠를로드하기 위해 내 링크를 수정하면 해당 콘텐츠를 현재 페이지에 삽입 할 수 있습니까?

<a class="bind-jquery-event-here-class" href="http://webpage.com">Link</a> 

내가 만들었지 만 작동하지 않습니다.

$(".bind-jquery-event-here-class").bind("click", function() {  
    var url = $(this)attr("href").val(); 
    var content = $.load(url); 
    alert(content); 
}); 

Answer 1

load 기능은 요청 응답을 수집하기위한 것이 아닙니다,이 기능은 예를 들어, 원격 파일에서 HTML을로드하고 DOM 요소에 주입하는 데 사용됩니다

$('a').bind('click', function(e) {   
    var url = $(this).attr('href'); 
    $('div#container').load(url); // load the html response into a DOM element 
    e.preventDefault(); // stop the browser from following the link 
}); 

당신이 만약 앵커 요소의 클릭 이벤트를 처리하면 브라우저가 링크 href를 따르지 못하게해야합니다.

Ajax 요청은 Same Origin Policy으로 인해 동일한 도메인에서만 수행 할 수 있습니다.

1) 당신이 당신의 익명 함수의 인수를 지정하지 않았다

Answer 2

는 코드 몇 가지 문제가 있습니다. 인수 이 이벤트입니다 (여기 : 클릭). 당신은 비활성화 클릭의 '정상' 행동이 나중에 필요하게 될 것입니다 : 당신이 val() 필요하지 않습니다

$("a.bind-jquery-event-here-class").bind("click", function(event) { 
     event.preventDefault(); 

2) href를 읽기 위해. (val() 입력 필드에서 물건을 판독하기위한 것이다.)

var url = $(this).attr("href"); 

3)의 A AJAX 비동기 약자. 코드의 의미는 다음과 같습니다. 로드는 서버에서 데이터로드를 시작하지만 은 완료 될 때까지을 기다리지 않습니다. 콜백 함수을 정의해야만 최종적으로 데이터가 처리됩니다.

4)로드는 AJAX 호출을 수행하고 결과를 DOM에 삽입하는 것입니다. 당신은 경고를 위해 그것을 사용할 수 없습니다. 경고가 필요하지 않은 경우 대신 $ .ajax를 사용하십시오.

5) AJAX를 통해 임의의 URL을로드 할 수 없으면 AJAX 통화는 자신의 서버로 돌아갈 수 있습니다. 다른 서버에서 물건을로드해야 할 경우 서버 측 스크립트를 프록시로 사용해야합니다. 프록시를 호출하는 방법은 다음과 같습니다.

$.ajax({ 
     type: "POST", 
     url: "proxy.php", 
     data: "url="+url, 
     success: function(data){ 
      alert("finally got data " + data); 
     } 
    }); 

여기 프록시의 예는 php입니다.

<?php 
error_reporting (E_ALL^E_NOTICE); 
if (isSet($_POST['url'])) { 
    if(true == ($str=file_get_contents($_POST['url']))) { 
    echo $str; 
    exit; 
    } 
} 
echo "could not read page"; 
?> 

는 PHP에 대한 경고의 말씀

: file_get_contents은 서버에서 비활성화 될 수 있습니다.당신은 A HREF 링크와 함께 전체 메뉴가있는 경우

$(document).ready(function(){ 

    $("a.bind-jquery-event-here-class").bind("click", function(event) { 
    event.preventDefault(); 
    var url = $(this).attr("href"); 
     alert("loading via proxy: " + url); 
    $.ajax({ 
     type: "POST", 
     url: "proxy.php", 
     data: "url="+url, 
     success: function(data){ 
     alert("finally got data " + data); 
     } 
    }); 
    }); 

}); 

Answer 3

당신이 메뉴 컨테이너 사업부 각각의 하위 요소를 선택하여이 을 수행 할 수 있습니다

여기에 전체 자바 스크립트 코드가 테스트에 사용됩니다입니다

$('#Menu >*').each(function(){<br> 
     $(this).bind('click',function(e){<br> 
      var el = e.target<br> 
      if(el.nodeName ==="A"){<br> 
       fireMenuLink(el.href);<br> 
      }<br> 
      return false;<br> 
     });<br> 
    }); 

에게 그것을 당신을 onclick 이벤트를 첨부 항상 태그는 서버 측에서 지원이 화면을 개발하려는 경우가 편리

function fireMenuLink(){<br> 
$("#container_element_ID").load(url,function(){<br> 
//Do something like hide the loader<br> 
     $('loaderStatus').hide();<br> 
    });<br> 
} 

의 기본 동작을 억제하기 위해 jQuery를에 false를 반환하고 u는 원하는한다 조각 URL을 사용하여 브라우저 기록을 관리하면서 화면 내용을 동적으로로드합니다. 여러 브라우저에서 조각 URL을 사용하여 화면 내용을 관리하는 데 사용할 수있는 라이브러리가 많이 있습니다. jQuery와 다른 모든면에서.

희망이
건배 :) 당신이 놓친