jQuery Return links is not working when Ajax

问题

jQuery return links are not working. I have Used jQuery and the basic Ajax feature. My jQuery returns the links from file Links_ajax.php.

I giving the code samples.

GetCustomerData.php has:

<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 has the following code

....

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

....

Now I come to the Main Page getCustomerData.php. I have used the Ajax feature that returns link from Links_ajax.php.

 .....

So, my ajax.js has the following Ajax scripts.

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

......

Now I come to the problem. When I execute the GetCustomerdata.php, I am able to get all the links from ajax.JQuery. And upon clicking that, I need a basic Ajax feature since loading the same <div> </div>. But I am unable to view it even though I done. Is there anything wrong in my code? Or do I have to use any other feature?

回答1:

First i wonder why you write a custom function HTTPrequest while you already have jquery object, infact you already use $.ajax at the top but then create getHTTPObject() later.

The problem is the javascript function requestCustomerInfo() never delegate to handle the link at the ajax response data, you need to delegate the function as a callback of the ajax request

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

回答2:

I highly recommend either using FireFox + FireBug to test this, or some other browser through an HTTP proxy that will log your traffic. FireBug will show you all of the Ajax requests and responses from your page, and should help you to determine whether data is coming back, and what.

回答3:

First try the following:

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

Thus you will know if it is really returning the data or not .

If this is working then you can replace

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

with

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

This should work.

来源：https://stackoverflow.com/questions/377854/jquery-return-links-is-not-working-when-ajax

标签

jquery

ajax

hyperlink