Question

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

如果在使用精确文件路径创建图像标记时提供图像src，它将正确显示图像（例如src =＆＃39; images / 0.jpg＆＃39;）。但是，这没有用，因为我需要它可以用于任何给定的图像，而不是特定的图像。
如果在使用包含文件路径的变量创建图像标记时提供图像src，则根本无法生成图像标记或单选按钮（例如src =＆＃39;＆＃34 ; +结果+＆＃39;＆＃34;）。

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

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

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

此时我很难过，我不知道什么可以从逻辑上阻止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工作正常，所以我没有列出代码以保持相关性。

Answer 1

我复制了你的代码并稍微调整了一下，所以我可以在没有网络服务的情况下运行它并且效果很好。这是我创建的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语句并查看我提到的两个值，您可能会看到问题。

Answer 2

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

图片标签不接受src

2 个答案: