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 — amura.cxg
– amura.cxg, Commented Apr 10, 2015 at 15:29
So if your PHP file expects POST data, why are you using GET? — icecub
– icecub, Commented Apr 10, 2015 at 15:30
I don't know, thought it might work cause GET wasn't working too — Tomasz Sklepowicz
– Tomasz Sklepowicz, Commented Apr 10, 2015 at 15:31
Well I agree with @amura.cxg . The link he posted should give you the answer. — icecub
– icecub, Commented Apr 10, 2015 at 15:34

charlietfl · Accepted Answer · 2015-04-10 15:36:35Z

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, 2015 at 15:36

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Omar Elawady Over a year ago

type is "get".so he will recieve it as $_GET['location']

charlietfl Over a year ago

@OmarElawady .. right, conflict between what was originally attempted as post and type being now set to get

Tomasz Sklepowicz Over a year ago

Maybe i'm passing the location wrong way? Every tutorial uses form, however I try to pass a href= argument..

charlietfl Over a year ago

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

Tomasz Sklepowicz Over a year ago

when i click the link <li><a href="javascript:void(0);" onclick="getImages("/images/portfolio/gallery/*/")"><h5>view all</h5></a></li> i get unexpected token } error in this line. Is there a way to pass location differently?

Jakir Hossain · Accepted Answer · 2015-04-10 16:22:27Z

0

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

answered Apr 10, 2015 at 16:22

Jakir Hossain

2,51720 silver badges24 bronze badges

Comments

StudioTime · Accepted Answer · 2015-04-10 16:43:57Z

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, 2015 at 16:43

StudioTime

24.4k40 gold badges129 silver badges217 bronze badges

1 Comment

Tomasz Sklepowicz Over a year ago

when i click the link <li><a href="javascript:void(0);" onclick="getImages("/images/portfolio/gallery/*/")"><h5>view all</h5></a></li> i get unexpected token } error in this line. Is there a way to pass location differently? –

Collectives™ on Stack Overflow

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

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related