试图从ajax返回php数据

Question

Im a little new to Ajax, and Ive been trying figure out what part im doing wrong. I have results being pulled from a database and thrown into xml. While im looping through the xml I'm trying execute a php file while sending it the ID number from the xml results and then return the 'echo' from the php file. Im not sure if im totally off or just missing one part, but the results come back 'undefined'.

Here is the php file that Im trying to get echoed out and show up.

echo rating_bar($id);

function rating_bar($id) {

    //other code, but $static_rater is what gets echoed

    $static_rater = "";
    $static_rater .= '<div id="ratingblock" class="ratingblock">';
    $static_rater .= '<div id="unit_long'.$id.'">';
    $static_rater .= '<ul id="unit_ul'.$id.'" class="unit-rating" style="width:'.$rating_unitwidth*$units.'px;">';
    $static_rater .= '<li class="current-rating" style="width:'.$rating_width.'px;"></li>';
    $static_rater .= '</ul>';
    $static_rater .= '<p class="static">Rating: <strong> '.$rating1.'</strong>/'.$units.' ('.$count.' '.$tense.' cast)</p>';
    $static_rater .= '</div>';
    $static_rater .= '</div>';

    //return join("
", $static_rater);
    echo $static_rater;exit;
}

And this is the .js code that im trying to get to return the results.

downloadUrl("phpsqlajax_genxml.php", function(data) {
    var xml = data.responseXML; 
    var bounds = new google.maps.LatLngBounds();
    var markers = xml.documentElement.getElementsByTagName("marker"); 
    // alert("downloadUrl callback, length="+markers.length);

    for (var i = 0; i < markers.length; i++)  { 
        var id = markers[i].getAttribute("id");
        if (!id) id = "id "+i;
        var name = markers[i].getAttribute("name");
        if (!name) name = "name "+i;
        var address = markers[i].getAttribute("address"); 
        if (!address) address = "address";
        var citystate = markers[i].getAttribute("citystate");
        if (!citystate) citystate = "city, ST";
        var phone = markers[i].getAttribute("phone");
        if (!phone) phone = "phone number";
        var type = markers[i].getAttribute("type");
        var point = new google.maps.LatLng( 
          parseFloat(markers[i].getAttribute("lat")), 
          parseFloat(markers[i].getAttribute("lng"))); 
        bounds.extend(point);
        var html = "<b>" + name + "</b> <br/>" + address + "<br/>" + citystate + "<br/>" + phone;  //html inside InfoWindow 
        var url = "starrating/_drawrating.php?id=" + id + "";
        //var contentString = ajaxLoad(url, parseResults, true);
        //var contentString =   downloadUrl(url, "POST", "text=" + text, completed);
        var contentString = AJAX('starrating/_drawrating.php','id='+id,
            function(data) {
                var htm = $("#ratingblock").html(data);
                alert(htm);
           }
      );

        var description = "<br><br>description" + id + " <br><b>" + name + "</b> <br/>" + address + "<br/>" + citystate + "<br/>" + phone;  //html inside InfoWindow
        var icon = customIcons[type] || {}; 
        var marker = new google.maps.Marker({ 
            map: map, 
            position: point, 
            icon: icon.icon, 
            shadow: icon.shadow,
            animation: google.maps.Animation.DROP
        }); 
        bindInfoWindow(marker, map, infoBubble, html, description, contentString); 
    } 
}); 


function AJAX(url, data, callback)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        callback(xmlhttp.responseText);
    }
}
xmlhttp.open("POST",url,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(data);

}

EDIT: Ok so ive been playing around with this and updated my code above. Now when I run this using firebug I can see the post and the response is this:

<div id="ratingblock" class="ratingblock"><div id="unit_long10"><ul id="unit_ul10" class="unit-rating" style="width:150px;"><li class="current-rating" style="width:0px;"></li></ul><p class="static">Rating: <strong> 0.0</strong>/5 (0 votes cast)</p></div></div>

But the alert just says [object Object] and the infowindow says [object Object]. So i know its calling and returning the data, and ive searched and tried just about everything I can think of to get the above section to appear correctly inside the infowindow. Any thoughts?

EDIT #2

Im trying a new approach below.

var contentString = $.ajax({
                            type:"POST",
                            url: "starrating/_drawrating.php",
                            dataType: "html",
                            data:"id="+id,
                            success: function(data){
                                    var $response=$(data);
                                    $response.find('ratingblock').html();
                                    console.log($response);
                                }
                        });

The console comes back with "Object[div#ratingblock.ratingblock]" but the results still say [object Object]. Any ideas what im missing?

Answer 1

$static_rater is an array you can't use the concatenation operator with it.

$static_rater[] = "
".'<div class="ratingblock">';
$static_rater[] = '<div id="unit_long'.$id.'">';
$static_rater[] = '<ul id="unit_ul'.$id.'" class="unit-rating" style="width:'.$rating_unitwidth*$units.'px;">';
$static_rater[] = '<li class="current-rating" style="width:'.$rating_width.'px;">Currently '.$rating2.'/'.$units.'</li>';
$static_rater[] = '</ul>';
$static_rater[] = '<p class="static">'.$id.'. Rating: <strong> '.$rating1.'</strong>/'.$units.' ('.$count.' '.$tense.' cast)</p>';
$static_rater[] = '</div>';
$static_rater[] = '</div>'."

";