Question

我正在尝试更改src加载的img个。 AJAX，其中用于控制函数的<select>和<option>元素也由AJAX加载。

我正在尝试这样做，以便更改页面上Flickr图像的大小。

我已经尝试加载元素，并调用现有函数来更新它，但当然在document.ready（）上不存在<select>选项，因此当我尝试获取它时返回null

我也尝试在我用于XML响应的PHP文件中加载一个新的<script type='text/javascript'></script>，但是虽然这在页面上显示但显然不会被选为源。

我如何告诉文件“重新准备好”本身，或承认新来源？

这是我的代码：

提出请求

    function makeRequest (url, userID, searchString, selectedLicense) {
        event.preventDefault();

        var formData = new FormData();
        formData.append("userID", userID);
        formData.append("searchString", searchString);
        formData.append("selectedLicense", selectedLicense);

        var xmlRequest = new XMLHttpRequest();
            xmlRequest.open("POST", url, true);
            xmlRequest.send(formData);

        xmlRequest.onreadystatechange=function()
        {
            if (xmlRequest.readyState===4 && xmlRequest.status===200) {
                document.getElementById("working...").innerHTML="<p style='background-color:#BCED91; width:200px; text-align:center;'>Done!</p>";
                document.getElementById("results").innerHTML=xmlRequest.responseText;
            } else {
                document.getElementById("results").innerHTML="<p>Ready State: " + xmlRequest.readyState + "</p> <p>Status Code: " + xmlRequest.status + "</p>";
            }
        }
    }

PHP

//more code before
        $resultString = $resultString . "<script type='text/javascript'>"
                                        . "function sizeChanged(i, select) {
                                                var sel = getSelectedOptionValue(select);
                                                var imgURL = document.getElementById(i.toString());

                                                alert(imgURL);
                                            }"
                                      . "</script>";

        //main loop
        foreach ($XML->photos->photo as $photo):
            $resultString = $resultString . '<div class="photoBox"' . photoBox($photoCounter) . "> <p>" . $photoCounter . ". <a href=\"" . $baseURL . $photo['owner'] . "/" . $photo['id'] . "\">" . $photo['title'] . "</a>" . "</p>"
                                          . " <p>" . "<img id='" . $photoCounter . "' src=\"http://farm" . $photo['farm'] . $imgURL . "/" . $photo['server'] . "/" . $photo['id'] . "_" . $photo['secret'] . "_" . $size . "\" alt=\"" . $photo['title'] . "\">" . "</p>"
                                          . "<select form='addInformationForm' id='selectSize" . $photoCounter . "' onChange='return sizeChanged(" . $photoCounter . ", selectSize" . $photoCounter . ");'>"
                                            . "<option value='n'>Small (320)</option>"
                                            . "<option value='z' selected='selected'>Medium (640)</option>"
                                            . "<option value='h'>Large (1600)</option>"
                                          . "</select>"
                                          . "</div>";
            $photoCounter++;
        endforeach;
//more code here
echo $resultString;

HTML输出（示例）

<div class="photoBox" style="background-color:#FFFFFF">
    <p>1. <a href="http://www.flickr.com/photos/25053835@N03/8427833074">Killip's Adirondack Travelog, page 20</a></p>
    <p><img id="1" src="http://farm9.staticflickr.com//8184/8427833074_2f7e22e7ce_z.jpg" alt="Killip's Adirondack Travelog, page 20"></p>
    <select form="addInformationForm" id="selectSize1" onChange="return sizeChanged(1, selectSize1);">
         <option value="n">Small (320)</option>
         <option value="z" selected="selected">Medium (640)</option>
         <option value="h">Large (1600)</option></select>
</div>

任何建议都非常感谢！

注意：此代码适用于内部工具，而非面向客户的网站。

Answer 1

<select>并不存在于onload，但是在您创建它的时候会存在：

var res = document.getElementById("results");
xmlRequest.onreadystatechange = function() {
    if (xmlRequest.readyState===4 && xmlRequest.status===200) {
        document.getElementById("working...").innerHTML="<p style='background-color:#BCED91; width:200px; text-align:center;'>Done!</p>";
        res.innerHTML = xmlRequest.responseText;
        var select = res.getElementsByTagName('select')[0];
        /* Use select here */
    } else {
        res.innerHTML="<p>Ready State: " + xmlRequest.readyState + "</p> <p>Status Code: " + xmlRequest.status + "</p>";
    }
};

请注意，<img>元素也应该可用，但您不会知道它的尺寸，因为它不会被下载。如果您想等到它被加载，您可以添加load事件监听器。

更改用AJAX加载的元素的src

1 个答案: