如何使用ajax从html文件将参数传递给php？

Question

I have protfolio.html file and i have a table #gallery with categories in it. I want to update content of the #gallery, depending on chosen category using ajax. To achieve this I have php file which scans specific folder with the images relevant to category and returns html, however I don't know how to pass the location string to php script. So far, i have this:

index.html file:

<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>

Script

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

php file:

# 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

You need to send key/value pairs, not just value as you are doing:

Try:

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

});

then in php receive with $_POST['location'] .

In browser console network tab, inspect the actual request and you will see exactly what is sent. This should always be your first point of troubleshooting ajax... inspecting the full request

Answer 2

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

Answer 3

Simplest way to pass location:

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

Then in your PHP file:

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