javascript - php/js/ajax 问题 : displaying many photos at once

Question

我正在尝试使用一些 ajax 制作画廊应用程序。它必须以这种方式工作:当键入要上传的图像的标题时，出现的是一个动态图库，其中包含标题照片，其中包含您当前在文本输入中键入的字符串。除了显示图像外，一切都很好。这是代码:

js文件:

var xmlHttp = createXmlHttpRequestObject();

function createXmlHttpRequestObject(){
   var xmlHttp;

   if(window.ActiveXObject){ //IE
      try{
         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
         }catch(e){
            xmlHttp =false;
            }
      }else{  //other browser
         try{
            xmlHttp= new XMLHttpRequest();
            }catch(e){
               xmlHttp =false;
               }
         }
      if(!xmlHttp)
            alert("cos nie tak!");
      else
            return xmlHttp;
   }

function process(){   
    if(xmlHttp.readyState==0 || xmlHttp.readyState==4){
      typedText=encodeURIComponent(document.getElementById("title").value );
      xmlHttp.open("GET", "ajax.php?text="+typedText, true);
      xmlHttp.onreadystatechange = handleServerResponse;
      xmlHttp.send(null);
      }else{
         setTimeout('process()', 1000);
         }
   }


function handleServerResponse(){
   if(xmlHttp.readyState==4){
            if(xmlHttp.status==200){
               xmlResponse=xmlHttp.responseXML;
               xmlDocumentElement=xmlResponse.documentElement;
               message=xmlDocumentElement.firstChild.data;
               document.getElementById('underInput').innerHTML=message;
               setTimeout('process()', 1000);
         }else{
            alert('wrong');
            }
      }
   }

我已经设法使变量 message 具有所需图像的 URL 列表。它看起来像这样:image1.jpg image2.jpg image3.jpg ...等。我苦苦挣扎的是使用 javascript 来解析这个字符串，并使用 javascript 在我的 index.php 文件的 div id="underInput" 节点中显示这些图像。

感谢您的帮助!

Answer 1

您可以尝试用空格分隔您的字符串图像名称，如下所示:在您的 handleServerResponse 函数中:

//"image1.jpg image2.jpg image3.jpg";
message = xmlDocumentElement.firstChild.data;
var image_list = message.split(' ');

for (var i in image_list) {
    var img = document.createElement("img");
    img.src = image_list[i];
   document.getElementById('underInput').appendChild(img);
}

但是，我建议你使用来自服务器的 JSON 数据而不是简单的字符串，它非常简单并且不需要拆分它，否则你可以管理数组和对象，这是最有效的。

你可以在 php 中输出一个 json 这样:

$myarray = array('image1.jpg', 'image2.jpg', 'image3.jpg');
echo json_encode($myarray);