Question

我有protfolio.html文件，我有一个表#gallery，里面有类别。我想更新#gallery的内容，具体取决于使用ajax选择的类别。为了实现这一点，我有php文件扫描特定文件夹与图像相关的类别并返回html，但我不知道如何将位置字符串传递给PHP脚本。到目前为止，我有这个：

index.html文件：

<li><a href="javascript:void(0);" onclick="getImages("/images/portfolio/gallery/*/")"><h5>view all</h5></a></li>
<li><a href="javascript:void(0);" onclick="getImages("/images/portfolio/gallery/webdesign/")"><h5>webdesign</h5></a></li>

脚本

function getImages(location)
{
    $.ajax({
        type: "GET",
        url: 'loadImages.php',
        data: location, 
        success: function(data) {
            $('#gallery').html(data);
        }
    });
}

php文件：

# To prevent browser error output

# Path to image folder
$imageFolder = $_POST["location"];

# Show only these file types from the image folder
$imageTypes = '{*.jpg,*.JPG,*.jpeg,*.JPEG,*.png,*.PNG,*.gif,*.GIF}';

# Set to true if you prefer sorting images by name
# If set to false, images will be sorted by date
$sortByImageName = false;

# Set to false if you want the oldest images to appear first
# This is only used if images are sorted by date (see above)
$newestImagesFirst = true;

# The rest of the code is technical
# Add images to array
$images = glob($imageFolder . $imageTypes, GLOB_BRACE);

# Sort images
if ($sortByImageName) 
{
    $sortedImages = $images;
    natsort($sortedImages);
} 
else 
{
    # Sort the images based on its 'last modified' time stamp
    $sortedImages = array();

    $count = count($images);

    for ($i = 0; $i < $count; $i++) 
    {
        $sortedImages[date('YmdHis', filemtime($images[$i])) . $i] = $images[$i];
    }

    # Sort images in array
    if ($newestImagesFirst) 
    {
        krsort($sortedImages);
    } 
    else 
    {
        ksort($sortedImages);
    }
}

$count = count($images);

for($i=1;$i<=$count; $i++)
{
    $
}

# Generate the HTML output
writeHtml('<ul class="ins-imgs">');

$count=1;

foreach ($sortedImages as $image) {

    # Get the name of the image, stripped from image folder path and file type extension

    # Get the 'last modified' time stamp, make it human readable

    # Begin adding
    if ($count==1 || $count%3==0)
    {
        writeHtml('<tr>');
    }

    writeHtml('<td>');
    writeHtml('<a  href="' . $image .'" data-lightbox="all" ><img src="' . $image .'" alt=""/></a>');
    writeHtml('</td>');

    if ($count==1 || $count%3==0)
    {
        writeHtml('</tr>');
    }

    $count++;
}

function writeHtml($html) 
{
    echo "document.write('" . $html . "');\n";
}

Answer 1

您需要发送key/value对，而不仅仅是value：

尝试：

$.ajax({
    .....
         data: {location : location},
    .....

});

然后在php中收到$_POST['location']。

在浏览器控制台网络选项卡中，检查实际请求，您将看到确切的发送内容。这应始终是您对ajax进行故障排除的第一步......检查完整的请求

Answer 2

function getImages(location)
{
    $.ajax({
        type: 'POST',
        url: 'loadImages.php',
        data: location, 
        success: function(data) {
            $('#gallery').html(data);
        }
    });
}

Answer 3

传递位置的最简单方法：

function getImages(location)
{
  $.ajax({
    type: "GET",
    url: 'loadImages.php?location='+location, // simply add as query string
    success: function(data) {
        $('#gallery').html(data);
    }
  });
}

然后在你的PHP文件中：

# Path to image folder
$imageFolder = $_GET["location"];

如何使用ajax从html文件传递参数到PHP？

3 个答案: