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

Question

伙计们，我正在尝试通过 Ajax 创建一个简单的 HTML post 方法。

这是我的代码:

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

请注意，我已将 jQuery1.9.1 包含在我的 head 标签中。

这是我的 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>';
    }

问题是没有响应，当我单击按钮时什么也没有发生。

我的错误在哪里以及如何才能完成这项工作？

Answer 1

请注意，在您的 ajax 中，您可以输入:'POST'。所以你的 PHP 应该寻找“POST”属性:

$_GET["next_url"];

应该是

$_POST["next_url"];

另外，

您需要为此添加引号:

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

最后，如果这仍然不起作用，我会在 Chrome 中打开开发人员工具并查看“网络”选项卡。确保您的 XHR 发送正确的数据。我很好奇 $nextUrlEncoded 是否永远无法正确设置。然后确保 XHR 的响应包含信息。这将帮助您确定中断来自何处。