jQuery carga contenido desde el enlace con Ajax

Tengo un elemento de enlace que tiene el enlace href a la página, pero tengo que usar Ajax para cargar ese contenido desde href -url y no redirigir al usuario a esa página. ¿Cómo puedo modificar mi enlace para simplemente cargar el contenido de ese enlace, de modo que pueda insertar ese contenido en la página actual?

Link 

Hice esto, pero no funciona.

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

La función de carga no pretende recostackr la respuesta de solicitud, esta función se utiliza para cargar HTML desde un archivo remoto e inyectarlo en un elemento DOM, por ejemplo:

 $('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 }); 

Si maneja los eventos de los elementos de anclaje, debe evitar que el navegador siga el enlace href.

También tenga en cuenta que la solicitud de Ajax se puede hacer solo dentro del mismo dominio debido a la misma política de origen .

Hay varios problemas con su código:

1) no ha especificado el argumento de su función anónima. El argumento es el evento (aquí: el clic). Necesitará esto más adelante para deshabilitar el comportamiento “normal” del clic:

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

2) Para leer el href no necesita val() . ( val() es para leer cosas de campos de entrada).

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

3) la A en AJAX significa asíncrono. para su código, esto significa: cargar simplemente inicia la carga de datos desde el servidor, pero no espera hasta que finalice. tienes que definir una función de callback que maneja los datos cuando finalmente llega.

4) cargar es para hacer una llamada AJAX e insertar el resultado en el DOM. No puedes usarlo para una alerta. usa $ .ajax en su lugar si realmente necesitas una alerta.

5) no puede cargar URLs principales a través de AJAX, su llamada AJAX solo puede volver a su propio servidor. Si necesita cargar cosas de otro servidor, debe usar un script de servidor como proxy. Así es como llamas al proxy:

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

y aquí hay un ejemplo de proxy en PHP.

  

una advertencia sobre el php: file_get_contents puede estar deshabilitada en su servidor.

Aquí está el código javascript completo que se usa para probar:

  $(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); } }); }); }); 

Si tiene un menú completo con enlaces href de este tipo, puede hacerlo seleccionando cada elemento secundario en el contenedor de menú div adjunte un evento onclick en él

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

Siempre debe devolver false en jQuery para suprimir el comportamiento predeterminado de la etiqueta

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

Esto es útil si desea desarrollar una pantalla que sea compatible desde el lado del servidor y desea cargar el contenido de la pantalla dinámicamente mientras administra el historial del navegador usando la URL del fragmento. Hay muchas bibliotecas que puede usar para administrar el contenido de la pantalla usando la URL del fragmento en todos los navegadores. Tanto en jQuery como en otros.

Espero que esto ayude
Saludos 🙂