Load PHP function with jQuery Ajax

Question

I have a file which is loaded at the top of my document, which is called Videos.php. Inside that file are several functions, such as getYoutubeVideos. On some pages, I need to call upon that function several times (up to 50), and it of course creates major lag on load times. So I have been trying to figure out how to call that function in, only when it is need (when someone clicks the show videos button). I have very little experience with jQuery's ajax abilities. I would like the ajax call to be made inside of something like this:

           jQuery('a[rel=VideoPreview1).click(function(){
                jQuery ("a[rel=VideoPreview1]").hide();
                jQuery ("a[rel=HideVideoPreview1]").show();
                jQuery ("#VideoPreview1").show();

                                //AJAX STUFF HERE

                preventDefault();
            });

Ok I have created this based on the responses, but it is still not working:

jQuery Code:

        jQuery(document).ready(function(){ 

            jQuery("a[rel=VideoPreview5]").click(function(){
                jQuery("a[rel=VideoPreview5]").hide();
                jQuery("a[rel=HideVideoPreview5]").show();
                jQuery.post("/Classes/Video.php", {action: "getYoutubeVideos",
artist: "Train", track: "Hey, Soul Sister"},
                    function(data){
                        jQuery("#VideoPreview5").html(data);
                    }, 'json');
                jQuery("#VideoPreview5").show();
                preventDefault();
            });
            jQuery("a[rel=HideVideoPreview5]").click(function(){
                jQuery("a[rel=VideoPreview5]").show();
                jQuery("a[rel=HideVideoPreview5]").hide();
                jQuery("#VideoPreview5").hide();
                preventDefault();
            });
        });

And the PHP code:

    $Action = isset($_POST['action']);
    $Artist = isset($_POST['artist']);
    $Track = isset($_POST['track']);
    if($Action == 'getYoutubeVideos')
    {
        echo 'where are the videos';
        echo json_encode(getYoutubeVideos($Artist.' '.$Track, 1, 5, 'relevance'));
    }

Also forgot to mention, I would like to pass variables through the function (i.e. getYoutubeVideos($Variables1, $Variable2);) — brandon14_99
– brandon14_99, Commented May 10, 2010 at 8:53
for some reason I got the json function to work by chaning the end of the function from ('json');) to ({},'json');). Not sure why the brackets are required, but it works. The search variables are still not getting sent correctly however, so working on that next. — brandon14_99
– brandon14_99, Commented May 11, 2010 at 16:52

ThiefMaster · Accepted Answer · 2010-05-10 08:00:58Z

2

$.post('Videos.php', {
    'action': 'getYoutubeVideos'
}, function(data) {
    // do your stuff
}, 'json');

In your php code, do something like this:

$action = isset($_POST['action'])? $_POST['action'] : '';
if($action == 'getYoutubeVideos')
{
    echo json_encode(getYoutubeVideos());
}

Then data in your JavaScript function will be the array/object/value returned by getYoutubeVideos().

answered May 10, 2010 at 8:00

ThiefMaster

320k85 gold badges608 silver badges648 bronze badges

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

Comments

kalkin · Accepted Answer · 2010-05-10 13:14:46Z

0

I would do the JS part like ThiefMaster describes, but the php part would i handle a little bit different.

I would do something like this:

if(isset($_POST['action'], $_POST['par1'], $_POST['par2'])
{
    $action = $_POST['action'];
    $result = $this->$action($_POST['par1'], $_POST['par2]);
    echo json_encode(result);
}

But be careful, if you have some methods in the class which shouldn't be called by the user, trough manipulating POST data, then you need some way to whitelist the methods the JavaScript may call. You can do it by prefixing the methods i.e:

 $this->jsMethod.$action(....);

or by simple if/switch condition.

answered May 10, 2010 at 13:14

kalkin

8701 gold badge8 silver badges15 bronze badges

1 Comment

brandon14_99 Over a year ago

Ok I am still struggling with the whole concept. Here's my main idea: 1. getYoutubeVideos function has a variable called search, so I need to send the search terms to the function in order to get results (i.e. getYoutubeVideo($SearchTerm1.' '.$SearchTerm2)). the jQuery script will already have these terms prepared using a different foreach statment, that generates the links, so how can I send preset variables from jQuery, to the php function that way? $.ajax ("Videos.php", {SearchTerm1: "word1", SearchTerm2: "word2"}, function(data){ $(#VideoPreview1).html(data); //PHP Data Returned Here? }

brandon14_99 · Accepted Answer · 2010-05-11 17:17:01Z

Ok here is what ended up working:
PHP CODE

    $Action = isset($_POST['action']);
    if($Action == 'getYoutubeVideos')
    {
      getYoutubeVideos($_POST['artist'].' '.$_POST['track'], 1, 5, 'relevance');
    }

JQUERY

        jQuery.ajax({
          type: "POST",
              url: "/Classes/Video.php",
          data: "action=getYoutubeVideos&artist=artist&track=track",
          success: function(data){
             jQuery("#VideoPreview1").html(data);
        }
        });

json encoding was annoying, not sure if json is hte better way of doing it, I could actually use the jQuery.post function as well, because the real problem was with the PHP. If anyone knows about any security problems with the method I am doing, please let me know. Seems fine though.

Collectives™ on Stack Overflow

Load PHP function with jQuery Ajax

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related