jQuery / Ajax-尝试通过Ajax创建POST方法并获取对HTML的响应

Question

Guys i'm trying to create a simple HTML post method by Ajax.

Here is my code:

<?PHP
 function callInstagram($url)
    {
    $ch = curl_init();
    curl_setopt_array($ch, array(
    CURLOPT_URL => $url,
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_SSL_VERIFYPEER => false,
    CURLOPT_SSL_VERIFYHOST => 2
    ));

    $result = curl_exec($ch);
    curl_close($ch);
    return $result;
    }

    $tag = Mage::getStoreConfig('vivastags/vivasgroup/instagra_tag');
    $client_id = "1e0f576fbdb44e299924a93cace24507";
    $Next_URL = $_GET["nexturl"];
    if($Next_URL == ""){
    $url = 'https://api.instagram.com/v1/tags/'.$tag.'/media/recent?client_id='.$client_id.'&count=24';
    } else {
    $url =  $Next_URL;
    }
    $inst_stream = callInstagram($url);
    $results = json_decode($inst_stream, true);
    $maxid = $results['pagination']['next_max_id'];
    $nexturl = $results['pagination']['next_url'];
    //Now parse through the $results array to display your results... 
    ?>
    <div class="holder">
    <?PHP
    foreach($results['data'] as $item){
        $image_link = $item['images']['thumbnail']['url'];
        $Profile_name = $item['user']['username'];
        $PostID = $item['id'];

        echo '<div style="display:block;float:left;">'.$Profile_name.' <br> <img src="'.$image_link.'" /></div>';
    }
    $nextUrlEncoded = urlencode($nexturl);
    ?>
    <div id="LoadedResults"></div>
    </div>
    <?PHP
    $nextUrlEncoded = urlencode($nexturl);
    ?>
    <button type="button" id="LoadMore">Load more Images!</button>

      <script>
    jQuery(document).ready(function($) {
      jQuery('#LoadMore').click(function() {

        var nextUrl   = "<?PHP echo $nextUrlEncoded;?>";

        $.ajax({
          url: 'ajax.php',
          type: 'POST',
          dataType: 'html',
          data: {
            next_url: nextUrl
          },
        }).done(function ( data ) {
          $('#LoadedResults').append(data);
        });

        alert("Post sended!");
      });
    });
  </script>

Note that i have included jQuery1.9.1 in my head tags.

Here is my ajax.php:

<?PHP
 function callInstagram($url)
    {
    $ch = curl_init();
    curl_setopt_array($ch, array(
    CURLOPT_URL => $url,
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_SSL_VERIFYPEER => false,
    CURLOPT_SSL_VERIFYHOST => 2
    ));

    $result = curl_exec($ch);
    curl_close($ch);
    return $result;
    }

    $tag = "bulgaria";
    $client_id = "1e0f576fbdb44e299924a93cace24507";
    $Next_URL = $_POST["next_url"];
    $url =  $Next_URL;

    $inst_stream = callInstagram($url);
    $results = json_decode($inst_stream, true);
    $maxid = $results['pagination']['next_max_id'];
    $nexturl = $results['pagination']['next_url'];
    //Now parse through the $results array to display your results... 
    foreach($results['data'] as $item){
        $image_link = $item['images']['thumbnail']['url'];
        $Profile_name = $item['user']['username'];

        echo '<div style="display:block;float:left;">'.$Profile_name.' <br> <img src="'.$image_link.'" /></div>';
    }

The problem is that there is no response, when i click the button just nothing happens.

Where is my mistake and how i can make this work?

Answer 1

Note, in your ajax, you have type: 'POST' . So your PHP should be looking for "POST" properties:

$_GET["next_url"];

Should be

$_POST["next_url"];

Also,

You need to put quotes around this:

var nextUrl   = "<?PHP echo $nextUrlEncoded;?>";

Finally, if this still doesn't work, I would open up developer tools in Chrome and check out the Network tab. Make sure that your XHR is sending the right data. I'm curious if $nextUrlEncoded is never getting set correctly. Then make sure that the response from your XHR includes information. This will help you determine where the break is coming from.