how to pass parameter to php from html file using ajax?

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";
}

possible duplicate of [Pass Javascript variable to PHP via ajax](http://stackoverflow.com/questions/15461786/pass-javascript-variable-to-php-via-ajax) — amura.cxg, Apr 10 '15 at 15:29
So if your PHP file expects POST data, why are you using GET? — icecub, Apr 10 '15 at 15:30
I don't know, thought it might work cause GET wasn't working too — Tomasz Sklepowicz, Apr 10 '15 at 15:31
Well I agree with @amura.cxg . The link he posted should give you the answer. — icecub, Apr 10 '15 at 15:34
Maybe i'm passing the location wrong way? Every tutorial uses form, however I try to pass a href= argument.. — Tomasz Sklepowicz, Apr 10 '15 at 15:45

score 0 · Answer 1 · answered Apr 10 '15 at 15:36

0

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

answered Apr 10 '15 at 15:36

charlietfl

170,828
13
121
150

`type` is "get".so he will recieve it as $_GET['location'] – Omar Elawady Apr 10 '15 at 15:41
@OmarElawady .. right, conflict between what was originally attempted as post and type being now set to get – charlietfl Apr 10 '15 at 15:44
Maybe i'm passing the location wrong way? Every tutorial uses form, however I try to pass a href= argument.. – Tomasz Sklepowicz Apr 10 '15 at 15:46
@TomaszSklepowicz also you can't use `document.write` after a page loads. it will wipe out everything in the whole page. You need to return the full html as response ....inspect the request in your browser console!! – charlietfl Apr 10 '15 at 15:48
when i click the link
view all

Tomasz Sklepowicz

Apr 10 '15 at 18:26

score 0 · Answer 2 · answered Apr 10 '15 at 16:22

0

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

answered Apr 10 '15 at 16:22

Jakir Hossain

2,457
18
23

score 0 · Answer 3 · answered Apr 10 '15 at 16:43

0

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"];

answered Apr 10 '15 at 16:43

StudioTime

22,603
38
120
207

when i click the link
view all

Tomasz Sklepowicz

Apr 10 '15 at 18:27

how to pass parameter to php from html file using ajax?

3 Answers3

view all

view all