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

Question

伙计们我试图通过Ajax创建一个简单的HTML发布方法。

这里是我的代码：

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

这里是我的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中，您有type: 'POST'。所以，你的PHP应该寻找 “POST” 属性：

$_GET["next_url"]; 

应该

$_POST["next_url"]; 

此外，

你需要把引号围绕此：

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

最后，如果这仍然不起作用，我会在Chrome中打开开发者工具并查看网络标签。确保你的XHR发送正确的数据。我很好奇，如果$nextUrlEncoded永远不会正确设置。然后确保来自XHR的响应包含信息。这将帮助您确定休息的来源。