jquery - ejemplos - preventdefault submit
Los enlaces de retorno de jQuery no funcionan cuando Ajax (4)
Los enlaces de retorno de jQuery no funcionan. He usado jQuery y la característica básica de Ajax. Mi jQuery devuelve los enlaces del archivo Links_ajax.php .
Le doy el código de muestras.
GetCustomerData.php tiene:
<html>
<script type="text/javascript">
<script src="ajax.js" type="text/javascript">
$(function() {
.....
$.ajax({
type: ''POST'',
url: ''Links_ajax.php'',
data: ''category=''+category ,
success: function(data){
$("#response").html(data);
}
});
}
......
}
...
<! Links return here
<div id="response">
</div>
</html>
<?
echo "Some Code";
?>
....
My Links_ajax.php tiene el siguiente código
....
echo ''<a href="getCustomerData.php?id=10" onclick="requestCustomerInfo();return false;">show me </a>'';
echo ''<a href="getCustomerData.php?id=11" onclick="requestCustomerInfo();return false;">show me </a>'';
....
Ahora llego a la página principal getCustomerData.php. He utilizado la función Ajax que devuelve el enlace de Links_ajax.php.
.....
Entonces, mi ajax.js tiene los siguientes scripts de Ajax.
var url = "GetCustomerData.php?id="; // The server-side script
function handleHttpResponse() {
if (http.readyState == 4) {
if (http.status == 200) {
var results = http.responseText;
document.getElementById(''divCustomerInfo'').innerHTML = results;
}
}
}
function requestCustomerInfo(event) {
if(event &&event.preventDefault) event.preventDefault();
else if (window.event && window.event.returnValue)
window.eventReturnValue = false;
var sId = 10;
http.open("GET", url + escape(sId), true);
http.onreadystatechange = handleHttpResponse;
http.send(null);
}
function getHTTPObject() {
var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
else if (window.ActiveXObject){
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
if (!xmlhttp){
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
}
return xmlhttp;
}
var http = getHTTPObject(); // We create the HTTP object
......
Ahora llego al problema. Cuando ejecuto GetCustomerdata.php, puedo obtener todos los enlaces de ajax.JQuery. Y al hacer clic en eso, necesito una característica básica de Ajax desde que cargué el mismo <div> </div> . Pero no puedo verlo aunque lo haya hecho. ¿Hay algo mal en mi código? ¿O tengo que usar cualquier otra característica?
Para empezar, no anides las etiquetas de guiones. Las etiquetas de scripts con una fuente deben cerrarse inmediatamente y deben estar debajo de o y no en otra.
Recomiendo usar FireFox + FireBug para probar esto, o algún otro navegador a través de un proxy HTTP que registrará su tráfico. FireBug le mostrará todas las solicitudes y respuestas de Ajax de su página, y le ayudará a determinar si los datos están regresando, y qué.
Primero me pregunto por qué escribes una función personalizada HTTPrequest mientras ya tienes el objeto jquery, de hecho ya usas $ .ajax en la parte superior pero luego creas getHTTPObject () más tarde.
El problema es que la función javascript requestCustomerInfo () nunca delegue para manejar el enlace en los datos de respuesta ajax, necesita delegar la función como una devolución de llamada de la solicitud ajax
$.ajax({
type:''POST'',
url: ''Links_ajax.php'',
dataType: ''html'',
data:''category=''+category,
success: function(data){
$("#response").html(data);
// here add the link click handler
$("#response a").click(function(){
// make http get request & custom handler
$.get(''GetCustomerData.php?id=10'',function(result){
$(''#divCustomerInfo'').html(result);
}); return false;
});
}
});
Primero intente lo siguiente:
success: function(data){
//$("#response").html(data);
alert(data);
}
Por lo tanto, sabrá si realmente está devolviendo los datos o no.
Si esto funciona, entonces puedes reemplazar
`$("#response").html(data)`
con
document.getElementById(''response'').innerHTML = data;
Esto debería funcionar.