动态创建 json 索引不会让我访问其中的数据

发布于 2024-09-12 08:45:01 字数 1663 浏览 5 评论 0原文

我正在尝试使用 jQuery 将 ajax 请求发送到一个非常简单的 PHP 脚本,以便为 jQuery 循环插件加载图像。我在从 json 对象获取图像源字符串时遇到问题。我将展示我的代码,然后在下面详细介绍:

<!doctype html>
<html lang="en-us">
    <head>
        <title>jQuery Cycle test</title>
        <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
        <style>
            #slideshow a { margin: 0; padding: 0; color: #fff; }
        </style>
    </head>

    <body>
        <div id="slideshow">
        </div>
    </body>

    <script type="text/javascript">
        $.get('slideshow.php', {start : "true"}, function(data){
            var images = JSON.parse(data);
            for(var i = 1; i < 6; ++i){
                var index = 'image' + i; alert(index); alert(images.index);
                $('#slideshow').innerHTML += '<a href="images/' + images.index + '"><img src="images/' + images.index + '" alt="" /></a>';
            }
        });

        $('#slideshow').cycle({
            fx: 'cover',
            direction: 'right',
            timeout: 3000,
            speed: 300
        });
    </script>

</html>

我的 PHP 脚本返回一个 json_encoded 关联数组,该数组在编码后变成一个普通的 json 对象。对于我的测试,我尝试加载五个图像:image1 - image5。正如您在我的 JavaScript 中看到的,我尝试通过将“i”的值附加到字符串“image”来动态创建一个新的索引/属性名称来访问这些单独的图像源字符串。一切直截了当。

我的问题是,当我以这种方式创建属性名称时,它返回“未定义”。当我手动尝试时,通过编写类似 images.image3 的内容,它会返回正确的源字符串。

我已经提醒了我的动态索引(如您所见),它们对我来说看起来格式良好。我不认为这是一个关闭问题,因为在这种情况下它将返回最后一个图像字符串。我现在很困惑,所以任何建议将不胜感激。

I'm trying to use jQuery to send an ajax request to a very simple PHP script to load images for the jQuery cycle plugin. I'm having an issue with obtaining the image source strings from my json object. I'll show my code, then go into more detail below:

<!doctype html>
<html lang="en-us">
    <head>
        <title>jQuery Cycle test</title>
        <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
        <style>
            #slideshow a { margin: 0; padding: 0; color: #fff; }
        </style>
    </head>

    <body>
        <div id="slideshow">
        </div>
    </body>

    <script type="text/javascript">
        $.get('slideshow.php', {start : "true"}, function(data){
            var images = JSON.parse(data);
            for(var i = 1; i < 6; ++i){
                var index = 'image' + i; alert(index); alert(images.index);
                $('#slideshow').innerHTML += '<a href="images/' + images.index + '"><img src="images/' + images.index + '" alt="" /></a>';
            }
        });

        $('#slideshow').cycle({
            fx: 'cover',
            direction: 'right',
            timeout: 3000,
            speed: 300
        });
    </script>

</html>

My PHP script returns a json_encoded associative array, which becomes a normal json object after the encoding. For my test, I have five images I'm trying to load: image1 - image5. As you can see in my JavaScript, I attempt to dynamically create a new index/property name to access these individual image source strings by appending the value of 'i' to the string 'image'. All straight forward.

My problem is that when I create my property names in this way, it returns 'undefined'. When I try it manually, by writing something like images.image3, it returns the proper source string.

I've alerted out my dynamic indexes (as you can see), and they look well-formed to me. I don't think it's a closure issue, as it would be returning the last image string in that case. I'm pretty stumped at this point, so any suggestions would be greatly appreciated.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

北恋 2024-09-19 08:45:01

您的 JSON 是否有可能有一个包含五个元素的零索引数组,因此当您的单索引循环到达最后一次迭代时,image5 是未定义的?

Is it possible your JSON has a zero-indexed array of five elements, and that image5 is therefore undefined when your one-indexed loop reaches that last iteration?

南巷近海 2024-09-19 08:45:01

我想通了。使用数组表示法而不是点表示法就达到了目的。我认为脚本试图将属性名称视为数字而不是字符串,因此数组表示法是正确的。从那里开始,消灭其他几个小错误就很简单了。

解决办法:

<!doctype html>
<html lang="en-us">
    <head>
        <title>jQuery Cycle test</title>
        <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
        <style>
            #slideshow a { margin: 0; padding: 0; color: #fff; }
        </style>
    </head>

    <body>
        <div id="slideshow">
        </div>
    </body>

    <script type="text/javascript">
        $.get('slideshow.php', {start : "true"}, function(data){
            var images = JSON.parse(data);
            for(var i = 0; i < 5; ++i){
                $('#slideshow').append('<a href="images/' + images['image' + i] + '"><img src="images/' + images['image' + i] + '" alt="" /></a>');
            }

                $('#slideshow').cycle({
                    fx: 'cover',
                    direction: 'right',
                    timeout: 3000,
                    speed: 300
                });
        });
    </script>

</html>

I figured it out. Using array notation rather than dot notation did the trick. I think that the script was trying to treat the property name as a number rather than a string, so array notation put it right. From there, it was a simple matter of squashing a couple other, small bugs.

The solution:

<!doctype html>
<html lang="en-us">
    <head>
        <title>jQuery Cycle test</title>
        <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
        <style>
            #slideshow a { margin: 0; padding: 0; color: #fff; }
        </style>
    </head>

    <body>
        <div id="slideshow">
        </div>
    </body>

    <script type="text/javascript">
        $.get('slideshow.php', {start : "true"}, function(data){
            var images = JSON.parse(data);
            for(var i = 0; i < 5; ++i){
                $('#slideshow').append('<a href="images/' + images['image' + i] + '"><img src="images/' + images['image' + i] + '" alt="" /></a>');
            }

                $('#slideshow').cycle({
                    fx: 'cover',
                    direction: 'right',
                    timeout: 3000,
                    speed: 300
                });
        });
    </script>

</html>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文