图片标签不接受src

时间:2015-03-04 00:01:10

标签: javascript php jquery ajax image

在使用JavaScript创建图像标记(以及相关的单选按钮)之后,我尝试使图像作为源获取值。我从测试和警报输出中看出以下内容:

  • 如果在使用精确文件路径创建图像标记时提供图像src,它将正确显示图像(例如src =' images / 0.jpg')。但是,这没有用,因为我需要它可以用于任何给定的图像,而不是特定的图像。

  • 如果在使用包含文件路径的变量创建图像标记时提供图像src,则根本无法生成图像标记或单选按钮(例如src ='&#34 ; +结果+'")。

注意:最后一个示例不在下面的代码中。结果是通过移动' $。post'在' out + ='的正下方的部分for循环中的行。

  • 如果在创建图像标记时图像src保留为空白,则会创建图像标记和单选按钮,但图像为预期的空白。如果我然后尝试使用' getElementByID(imgID).src'在此之后更改图像源,它无法执行任何操作。 (' imgID'这是一个例子,而不是代码所说的内容。)

除此之外,使用警报并将信息转储到div中表示正在发布comicID,并且肯定找到了图像src的文件路径,并且正在将其复制到变量' result&# 39;正确地说,甚至在创建标签之前的一行或尝试使用' getElementById'来编辑它。

此时我很难过,我不知道什么可以从逻辑上阻止src阅读。

-

使用Javascript:

<script>
// Loads the user's comic list from the database.
        function loadComic()
        {
        var xmlhttp = new XMLHttpRequest();
        var getID = '<?php echo $_SESSION["userID"]; ?>';
        var url = "loadCom.php?userID="+getID;


        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
            {
                loadComicJSON(xmlhttp.responseText);
            }
        }

        xmlhttp.open("GET", url, true);
        xmlhttp.send();

        }

        // JSON parsing for 'loadComic'.
        function loadComicJSON(response)
        {
            var arr = JSON.parse(response);
            var i;
            var out = "";

            document.getElementById("loadList").innerHTML="";

            if (arr.length == 0)
            {
                //Irrelevant manipulation of HTML.
            }
            else
            {   
                out+="<br>";

                for(i = 0; i < arr.length; i++)
                {
                    out += "<hr><br><img name = '" + ('cm' + arr[i].comicID) + "' id='" + ('com' + arr[i].comicID) + "' onclick='resizeThumb(this)' height='100px;' src='' ><input name='comicList' type='radio' id='" + arr[i].comicID + "' value='" + arr[i].comicID + "'>" + arr[i].comicName + " </option><br><br>";                        
                }


                document.getElementById("loadList").innerHTML=out;
                for(j=0; j< arr.length; j++)
                {
                    tempID = (arr[j].comicID);
                    $.post("getCover.php", {comicID:tempID}, function(result)
                    {
                        document.getElementById("loadList").innerHTML+="<p>"+result+"</p>";
                        document.getElementById("com"+arr[j].comicID).src = result;
                    }
                    );

                }

            }

        }

    </script>

PHP(getCover.php):

<?php
if (isset($_POST["comicID"]))
{
    include_once('includes/conn.inc.php');
    $checkID = $_POST["comicID"];

    $query = ("SELECT pageLocation FROM page WHERE comicID = '$checkID' ORDER BY pageNum");
    $result = mysqli_query($conn, $query);
    $row = mysqli_fetch_assoc($result);
    print_r($row["pageLocation"]);
}
else
{   
    $checkID = null;
    echo "Error. No comic found.";
}

?>

据我所知,loadList.php工作正常,所以我没有列出代码以保持相关性。

2 个答案:

答案 0 :(得分:0)

我复制了你的代码并稍微调整了一下,所以我可以在没有网络服务的情况下运行它并且效果很好。这是我创建的HTML页面:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
<script>

    // JSON parsing for 'loadComic'.
    function loadComicJSON()
    {
        var arr = [{comicID: 1},{comicID: 2},{comicID: 3}];
        var result = "monkey.jpeg";
        var i;
        var out = "";

        document.getElementById("loadList").innerHTML="";

        if (arr.length == 0)
        {
            //Irrelevant manipulation of HTML.
        }
        else
        {
            out+="<br>";

            for(i = 0; i < arr.length; i++)
            {
                out += "<hr><br><img name = '" + ('cm' + arr[i].comicID) + "' id='" + ('com' + arr[i].comicID) + "' onclick='resizeThumb(this)' height='100px;' src='' ><input name='comicList' type='radio' id='" + arr[i].comicID + "' value='" + arr[i].comicID + "'>" + arr[i].comicName + " </option><br><br>";
            }


            document.getElementById("loadList").innerHTML=out;
            for(j=0; j< arr.length; j++)
            {
                var imgSrc;
                tempID = (arr[j].comicID);
                document.getElementById("loadList").innerHTML+="<p>"+result+"</p>";
                document.getElementById("com"+arr[j].comicID).src = result;

            }

        }

    }

</script>
</head>
<body>
<div id="loadList"></div>
<button onclick="loadComicJSON()">Try it</button>

</body>
</html>

正如您所看到的,我创建了一个JSON对象数组,其中包含comicID,并且静态地创建了图像作为&#39; monkey.jpeg&#39;。

代码有效,因此“响应”问题存在问题。您传递到loadComicJSON方法或POST方法的结果。

添加几个console.log语句并查看我提到的两个值,您可能会看到问题。

答案 1 :(得分:0)

自己解决了这个问题。事实证明$ .post需要是$ .get,并且它需要在技术上超出循环(即在其自己的函数中)才能正常工作。此后工作正常,并进行了一些小调整。