Ajax GET HTML为图像返回undefined'src'

时间:2013-04-09 15:43:54

标签: jquery ajax html-table src targeting

我以前使用过这个并且没有针对div的问题,但这次我的目标是埋藏在已经在Intranet网站上很久的表中的图像。我终于找到了它的代码,并在名为$('.targetTable')的表中添加了一个类名。现在我试图从表中提取某些元素,以显示在我的新页面上的div内。以下是从表中提取HTML的代码:

$(document).ready(function(){

$mission = $('#targetDiv');

$.ajax({
  url: "http://example.com/values/values.cfm?val=commitment",
  cache: false
}).done(function( html ) {
    $div = $('table.targetTable', html);

    $img = $div.children('tr:eq(3)').children('td').find('img').attr('src');

    $mission.append('<img src="'+$img+'" />');

});



});

以下是AJAX调用提取的表:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>commitment</title>
</head>
<body>


<table border="0" style="border: 1px solid gray;" cellspacing="0" class="targetTable">
    <tr style="background-color: #FFDDBB;">
        <td align="center" style="padding: 8px;">

            <img src="../mp_images/values/commitment_med.jpg" width="600" height="439">
        </td>
    </tr>

    <tr style="background-color: #FFDDBB;"> 
        <td valign="top" style="padding: 8px;">     
                <div style="text-align:center; letter-spacing: 4px; font-size: 140%; font-weight: bold; margin-bottom: 30px;">COMMITMENT</div>

                <div style="font-family:Georgia, 'Times New Roman', Times, serif; font-size: 100%">
                We recognize Commitment as a fundamental cornerstone underpinning our everyday activities.  Our commitment is a steadfast devotion to our people, our licensees, and to the public to responsibly carry out the mission of the agency, unwavering from the highest standards of safety, excellence, and professionalism.
                </div>
        </td>

    </tr>

    <tr style="background-color: #FFDDBB;">
        <td style="border-bottom: 1px solid gray;">&nbsp;

        </td>
    </tr>


    <tr bgcolor="white">
        <td align="center" colspan="3" style="padding: 8px;">
            <a href="../values/values.cfm?val=Commitment" ><img src="../mp_images/values/commitment_small.jpg" border="0" /></a>
            <a href="../values/values.cfm?val=Cooperation"><img src="../mp_images/values/cooperation_small.jpg"  border="0" /></a>
            <a href="../values/values.cfm?val=Excellence"><img src="../mp_images/values/excellence_small.jpg"  border="0" /></a>
            <a href="../values/values.cfm?val=Integrity"><img src="../mp_images/values/integrity_small.jpg" border="0" /></a>
            <a href="../values/values.cfm?val=Openness"><img src="../mp_images/values/openness_small.jpg" border="0" /></a>
            <a href="../values/values.cfm?val=Respect"><img src="../mp_images/values/respect_small.jpg" border="0" /></a>
            <a href="../values/values.cfm?val=Service"><img src="../mp_images/values/service_small.jpg" border="0" /></a>
            <a href="../values/values.cfm?val=Mission"><img src="../mp_images/values/Mission_small.jpg" border="0" /></a>
            <a href="../values/values.cfm?val=Vision"><img src="../mp_images/values/Vision_small.jpg" border="0" /></a>
        </td>
</tr>


</table>
</body>
</html>

现在,每当我定位img src时,它都会以未定义的形式返回。我的目标是错误还是其他类似doctype或CFM的兼容性?也出于某些原因,我无法弄清楚Chrome是否会引发错误。它告诉我,我的AJAX已将HTML中的所有相对路径转换为绝对路径,但绝对路径指向我的页面而不是旧页面和图像位置。如果有人可以找到那个,我会指向一个我之前问过这个问题的页面,你会得到一个双重复选标记。

1 个答案:

答案 0 :(得分:3)

该表是正文的直接子表,当正文被删除(它将会被删除)时,该表将成为顶级元素。变化

$div = $('table.targetTable', html);

$div = $(html).filter('table.targetTable');

要避免其他问题,请使用:

$div = $($.parseHTML(html)).filter('table.targetTable');