jQuery Ajax返回链接不工作

问题描述:

jQuery返回链接不起作用。我已经使用jQuery和基本的Ajax功能。我的jQuery返回文件Links_ajax.php的链接。jQuery Ajax返回链接不工作

我给的代码样本。

GetCustomerData.php有:

<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"; 


?> 

    .... 

我Links_ajax.php具有下面的代码

.... 

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>'; 

.... 

现在我来给主页getCustomerData.php。我使用了从Links_ajax.php返回链接的Ajax功能。

..... 

所以,我的ajax.js有以下的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 

......

现在我来的问题。当我执行GetCustomerdata.php时,我能够从ajax.JQuery获取所有链接。 而在点击,我需要加载以来同<div></div>一个基本的Ajax特性。但即使完成,我也无法查看它。 我的代码有什么问题吗?或者我必须使用任何其他功能?

首先我不知道为什么你写了一个自定义函数的HttpRequest,而你已经拥有jQuery对象,事实上你已经在使用$就在顶部,但随后()后创建getHTTPObject。

的问题是JavaScript函数requestCustomerInfo()从未授权以处理Ajax响应数据的链接,你需要委派功能作为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; 
      }); 
     } 
}); 

对于初学者来说,不要窝脚本标记。带有源代码的脚本标签应该立即关闭,并且应该位于或之下而不在其他位置。

首先尝试以下操作:

success: function(data){ 
    //$("#response").html(data); 
    alert(data); 
    } 

这样你就会知道,如果它真的返回数据或不。

如果这是工作,那么你可以用

document.getElementById('response').innerHTML = data; 

这应该更换

`$("#response").html(data)` 

我强烈建议,要么使用的是Firefox +萤火测试,或通过将记录您的流量HTTP代理一些其他的浏览器。萤火虫会告诉你所有的Ajax请求的并回应从您的网页,并应帮助您确定数据是否回来了,和什么。