将 php $_GET[''] 与 Javascript 函数结合起来

发布于 2024-12-04 21:58:41 字数 3794 浏览 1 评论 0原文

我目前正在编写一个画廊，到目前为止，该画廊一直将 AJAX 和 Javascript 与 xml 文件相结合来加载所有图像。现在我来到了有趣的部分，我单击图像进入内部画廊。（在第一页上，他们加载每个会话的一个图像，当按下一个图像时，它将继续该会话的其余图像。）

我在 AJAX 方面遇到的问题（我确信有一个巧妙的技巧可以解决这个问题）这也是！）的原因是，当页面重新加载时，它会自动返回到会话索引，因为没有 URL 更改。

到目前为止，我所做的是将一个 javascript 函数放入一个文档中，仅加载图库索引。这工作完美无瑕。

在另一个文件中，我得到了几乎相同的代码，但它加载了加载其余会话图像的函数，但我没有让它工作。

这是应该加载特定会话图像的脚本。

<script type="text/javascript">
    window.onload = displayGallery(<?php echo $_GET['session']; ?>);
</script>

<div id="gallery">

</div>

当我只使用 javascript 和链接中的“onload”时，它工作得很好，但后来我在重新加载页面时遇到了问题。现在我只是用 php 来包含这个文件和 $_GET “displayGallery()”的变量

function displayGallery(sessionAtt)

所以为了弄清楚这一点，我解释的东西很垃圾，我需要帮助来使 displayGallery(sessionAtt) 在抓取后实际运行url 中的基本变量。

我对 Javascript 非常陌生。到目前为止，大部分脚本都是用 php 完成的。

编辑：

稍微解释一下该网站：这是我为我的一个朋友制作的画廊。除了她之外，其他任何人都无法登录，所有子页面（开始、图库、关于等）都是通过 php“include”加载的。

XML：

<gallery>
    <session>
        <sessionName>Beauty</sessionName>
        <path>gallery/beauty/</path>
        <item>
            <file>_DSC2331.jpg</file>
            <name>Picture 1</name>
        </item>
        <item>
            <file>_DSC2339.jpg</file>
            <name>Picture 2</name>
        </item>
        <item>
            <file>_DSC2350.jpg</file>
            <name>Picture 3</name>
        </item>
        <date>2011-08-03</date>
    </session>
    <session>
        <sessionName>Red</sessionName>
        <path>gallery/red/</path>
        <item>
            <file>_MG_6227-web.jpg</file>
            <name>Picture 1</name>
        </item>
        <item>
            <file>_MG_6235-web.jpg</file>
            <name>Picture 2</name>
        </item>
        <item>
            <file>_MG_6240-cropped-web.jpg</file>
            <name>Picture 3</name>
        </item>
        <date>2011-08-03</date>
    </session>
</gallery>

js：

function displayGallery(sessionAtt)
{
    var xmlDoc = loadDoc("gallery/gallery.xml");
    var sessions = xmlDoc.getElementsByTagName("session");
    var txt = getGallery(sessions, sessionAtt);
    document.getElementById("gallery").innerHTML = txt;
}

function getGallery(sessions, sessionAtt) {
    var items = null,
    i = 0,
    j = 0,
    sessionName = "",
    link = "",
    img = "",
    path = "",
    file = "",
    txt = "";
    for (i = 0; i < sessions.length; i++) { 
        sessionName = sessions[i].getElementsByTagName("sessionName")[0].childNodes[0].nodeValue;
        if(sessionName == sessionAtt)
        {
            items = sessions[i].getElementsByTagName("item");
            path = sessions[i].getElementsByTagName("path")[0].childNodes[0].nodeValue;
            for (j = 0; j < items.length; j++) {
                file = items[j].getElementsByTagName("file")[0].childNodes[0].nodeValue;
                link = '<a href="' + path + file + '" rel="lightbox[' + sessionName + ']" title="' + sessionName + '">';
                img = '<img src="' + path + file + '" class="thumb" onclick="displayImage();" /></a>';
                txt += link + img;
            }
        }
    }
    return txt;
}

我尝试在函数中设置 sessionAtt 来运行脚本，并且它有效。

window.onload = displayGallery;

但是当将其更改为

window.onload = displayGallery('Red');

手动和使用 php 时......什么都没有。

原文

I am currently coding a gallery which until now has been combining AJAX and Javascript with an xml-file to load all images. Now I have come to the fun part where I click an image to enter the inner gallery. (On the first page they load one image of each session and when one image is pressed it will continue to the rest of the images of that session.)

The problem that I have with AJAX (I'm sure there is a neat hack for this as well!) is that when the page is reloaded it automatic goes back to the session index since there is no URL-change.

What I have done now, so far is to put one javascript-function in one document where it loads only the gallery index. This works flawless.

In the other file I got just about the same code, but instead it loads the function that loads the rest of the session-images, but I don't get it to work.

Here is the script that should load the specific session-images.

<script type="text/javascript">
    window.onload = displayGallery(<?php echo $_GET['session']; ?>);
</script>

<div id="gallery">

</div>

When I just only javascript and an "onload" in the link it worked just fine, but then I had the problem to reload the page. Now I just php to include this file and $_GET the variable for "displayGallery()"

function displayGallery(sessionAtt)

So in an attempt to make this clear, I'm rubbish explaining stuff, I need help with making the displayGallery(sessionAtt) actually run after grabbing the essential variable from the url.

I am VERY fresh on Javascript. Done most scripts in php up until now.

EDIT:

To explain the site a bit: It's a gallery I'm making for a friend of mine. There is no login for anyone else but her and all sub-pages (Start, Gallery, About, etc.) is loaded through php "include".

The XML:

<gallery>
    <session>
        <sessionName>Beauty</sessionName>
        <path>gallery/beauty/</path>
        <item>
            <file>_DSC2331.jpg</file>
            <name>Picture 1</name>
        </item>
        <item>
            <file>_DSC2339.jpg</file>
            <name>Picture 2</name>
        </item>
        <item>
            <file>_DSC2350.jpg</file>
            <name>Picture 3</name>
        </item>
        <date>2011-08-03</date>
    </session>
    <session>
        <sessionName>Red</sessionName>
        <path>gallery/red/</path>
        <item>
            <file>_MG_6227-web.jpg</file>
            <name>Picture 1</name>
        </item>
        <item>
            <file>_MG_6235-web.jpg</file>
            <name>Picture 2</name>
        </item>
        <item>
            <file>_MG_6240-cropped-web.jpg</file>
            <name>Picture 3</name>
        </item>
        <date>2011-08-03</date>
    </session>
</gallery>

The js:

function displayGallery(sessionAtt)
{
    var xmlDoc = loadDoc("gallery/gallery.xml");
    var sessions = xmlDoc.getElementsByTagName("session");
    var txt = getGallery(sessions, sessionAtt);
    document.getElementById("gallery").innerHTML = txt;
}

function getGallery(sessions, sessionAtt) {
    var items = null,
    i = 0,
    j = 0,
    sessionName = "",
    link = "",
    img = "",
    path = "",
    file = "",
    txt = "";
    for (i = 0; i < sessions.length; i++) { 
        sessionName = sessions[i].getElementsByTagName("sessionName")[0].childNodes[0].nodeValue;
        if(sessionName == sessionAtt)
        {
            items = sessions[i].getElementsByTagName("item");
            path = sessions[i].getElementsByTagName("path")[0].childNodes[0].nodeValue;
            for (j = 0; j < items.length; j++) {
                file = items[j].getElementsByTagName("file")[0].childNodes[0].nodeValue;
                link = '<a href="' + path + file + '" rel="lightbox[' + sessionName + ']" title="' + sessionName + '">';
                img = '<img src="' + path + file + '" class="thumb" onclick="displayImage();" /></a>';
                txt += link + img;
            }
        }
    }
    return txt;
}

I have tried to run the script with sessionAtt set in the function and it works.

window.onload = displayGallery;

But when changing it to

window.onload = displayGallery('Red');

both manually and with php... Nothing.

分享到QQ

分享到微博

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

发布评论

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

鹿童谣 2024-12-11 21:58:41

你的代码对我来说工作得很好。我做的唯一不同的是我使用了而不是 window.onload = displayGallery('Red');

正如 Martin 指出的，使用 window.onload 尝试在页面加载之前

查找，给出错误： document.getElementById("gallery") is null

使用等待页面完成加载，然后再调用 displayGallery 。

回复收藏 0 原文

魂ガ小子 2024-12-11 21:58:41

我不确定我是否理解你想要做什么。但尝试这些事情。

**。创建一个 javascript 变量来保存 GET['session'] 的值。然后使用该变量。它也更容易调试。

**。 window.onload 的 insdead 使一个函数将其称为“init”，并在 body 标记中写入：

<head>
 <script>
   function init(){
     //displaying gallery or other stuff
  }
 </script>
</head>
<body onload="init();">

这可确保您的脚本在页面加载后运行。

** 如果我没理解错的话，每个用户都有一个会话。在这种情况下（根据经验）位于 php 文件的最顶部，甚至在

session_start();

I am not sure that I understood what you are trying to do. But try these things.

**. make a javascript variable that will hold the value of GET['session']. and later use that variable. its also easier for debugging.

**. insdead of window.onload make a function call it 'init' and in the body tag write:

<head>
 <script>
   function init(){
     //displaying gallery or other stuff
  }
 </script>
</head>
<body onload="init();">

this ensures that your script runs after the page was loaded.

** If I got you right, there is a session for each user. and in this case (as a rule of thumb) at the very top of your php file, even before the

session_start();

回复收藏 0 原文

遗心遗梦遗幸福 2024-12-11 21:58:41

多次阅读您的描述后...

1) GET 变量仅在您在 URL 中提供变量时才起作用，例如。 index.php?session=model1

2) 你说后退按钮不起作用，因为页面没有改变，如果你正确使用获取变量，这是错误的

你的索引页面应该链接到每个会话页面，例如所以：只有这样你才能使用 javascript 来拉取 gallery.php 上的变量

回复收藏 0 原文

涫野音 2024-12-11 21:58:41

对我来说，您似乎应该使用 XSLT 而不是您所做的...将其标记为 WIKI，因为它没有回答您的具体问题

回复收藏 0 原文

葵雨 2024-12-11 21:58:41

而不是 window.onload = displayGallery();

使用

window.onload = function() {
    displayGallery(<?php echo "'" . $_GET['session'] . "'"; ?>);
};

正如您所说，分配像 window.onload = displayGallery 这样的函数; 有效。当像 window.onload = displayGallery('Red'); 这样分配它时，发生的情况是该函数没有附加到 window.onload，而是它< em>返回是。并且该函数不返回任何内容，因此window.onload = undefined;。

这也解释了为什么没有任何反应，因为该函数不是在 onload 时调用的，而是在浏览器执行脚本时调用的。

我解决此问题的方法是分配一个函数而不执行它 (window.onload = function() { ... })，然后放置您所在的函数 > 在其中执行。

Instead of window.onload = displayGallery(<?php echo $_GET['session']; ?>);

Use

window.onload = function() {
    displayGallery(<?php echo "'" . $_GET['session'] . "'"; ?>);
};

As you said, assigning the function like window.onload = displayGallery; works. When assigning it like window.onload = displayGallery('Red');, what is happening is that the function is not being attached to window.onload, but what it returns is. And the function returns nothing, so window.onload = undefined;.

This also explains why nothing happens, because the function is not being called on onload, but as soon as the browser executes the script.

The way I've fixed this is by assigning a function without executing it (window.onload = function() { ... }), and placed the function which you are executing within it.

回复收藏 0 原文

~没有更多了~