AJAX调用图像路径的问题,将JSON消息转换为javaScript数组并尝试显示图像
Issue with AJAX call of images paths, converting JSON message into javaScript array and trying to display the images?
尝试使用JSON消息和AJAX将图像从PHP数组加载到javaScript数组。使用函数buildImage()将数组中的第一张图像加载到div内容中。使用onclick将图像更改为数组中的下一个图像。我是AJAX和JSON的新手。JSON消息和javaScript数组之间的转换是我的主要问题。
PHP<?php
include("mysqlconnect.php");
$select_query = "SELECT `ImagesPath` FROM `offerstbl` ORDER by `ImagesId` DESC";
$sql = mysql_query($select_query) or die(mysql_error());
$data = array();
while($row = mysql_fetch_array($sql,MYSQL_BOTH)){
$data[] = $row['ImagesPath'];
}
echo $images = json_encode($data);
?>
客户端脚本
<script>
var images = JSON.parse(xmlhttp.responseText);
function importJson(str) {
// console.log(typeof xmlhttp.responseText);
if (str=="") {
document.getElementById("content").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4)
{
images = JSON.parse(xmlhttp.responseText);
document.getElementById("content").innerHTML=images;
}
}
xmlhttp.open("GET","http://content.php");
xmlhttp.send();
}
function buildImage(src) {
var img = document.createElement('img')
img.src = src
alert("1");
document.getElementById('content').appendChild(img);
}
for (var i = 0; i < images.length; i++) {
buildImage(images[i]);
}
</script>
</head>
<body onload= "importJson();" onload= "buildImage();" >
<div class="contents" id="content" onclick="buildImage()"></div>
</body>
在xmlhttp.responseText
准备好之前您呼叫JSON.parse(xmlhttp.responseText)
响应就绪时调用
if (xmlhttp.readyState==4)
{
images = JSON.parse(xmlhttp.responseText);
document.getElementById("content").innerHTML=images;
}
AJAX是异步的。您必须解析JSON并在onreadystatechange
函数中运行for
循环
<script>
function importJson(str) {
// console.log(typeof xmlhttp.responseText);
if (str=="") {
document.getElementById("content").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status == 200)
{
images = JSON.parse(xmlhttp.responseText);
for (var i = 0; i < images.length; i++) {
buildImage(images[i]);
}
}
}
xmlhttp.open("GET","http:/content.php");
xmlhttp.send();
}
function buildImage(src) {
var img = document.createElement('img')
img.src = src
alert("1");
document.getElementById('content').appendChild(img);
}
</script>
</head>
<body onload= "importJson();" >
<div class="contents" id="content" onclick="buildImage()"></div>
</body>
相关文章:
- 使用图像数组列表的simplegallary.js显示适合桌面屏幕的图像
- Javascript图像数组预加载速度和从内存中删除
- 将图像数组访问到动态表中
- Javascript图像数组
- JavaScript 在删除预上传图像时不清除图像数组
- 访问标记图标的图像数组元素
- 使用javascript/jquery获取具有图像数组的对象中的所有图像
- 如何将图像数组应用于Meteor.js中的模板辅助对象
- 如何创建图像数组作为链接
- 循环遍历图像数组并将其显示到HTML页面
- 打乱图像数组jquery
- 来自 flickr 的图像数组未按预期顺序显示
- 将图像数组从一个窗口传递到另一个窗口,并在javascript的新窗口中显示图像
- 使用 javascript 从图像数组中更改 img 标签 src.骰子游戏
- 将图像数组放入表中 - Javascript
- 加载带有 onload 的图像数组,如何限制将它们绘制到画布
- 如何自动循环浏览图像数组
- JavaScript:图像数组
- Javascript图像数组问题
- 在HTML5中使用JavaScript实现图像数组的拖放