2016-08-04 166 views
0

我做了一个阿贾克斯网站从/pages文件夹中调用页面ajax-container div在我的index.php第二个Ajax请求不起作用

现在我想使第一AJAX请求成功,但第二个请求将只在某些码页之后第二个Ajax请求,

例如:我叫work.php的页面,而这个页面里面我想打电话给页work-slider从同一个文件夹并替换由工作slider.php的work.php网页在我的Ajax的div容器,当我在图像link-in 点击,但我不能找到使它成为一个解决方案,

这是我的实际代码:

index .PHP:

<div id="ajax-container"> 
 
<?php 
 
    $d = "pages/"; 
 
    if (isset($_GET['p'])) { 
 
    $p = strtolower($_GET['p']); 
 
    if (preg_match("/^[a-z0-9\-]+$/", $p) && file_exists($d . $p . ".php")) { 
 
     include $d . $p . ".php"; 
 
    } else { 
 
     include $d . "404.php"; 
 
    } 
 
    } else { 
 
    include $d . "home.php"; 
 
    } 
 
?> 
 
</div>

的Ajax功能:

var afficher = function(data) { 
 

 
    $('#ajax-container').fadeOut(250, function() { 
 
     $('#ajax-container').empty(); 
 
     $('#ajax-container').append(data); 
 
     $('#ajax-container').fadeIn(100, function() {}); 
 

 
    }); 
 
}; 
 

 
var lastRequest = null; 
 
if (lastRequest !== null) { 
 
    lastRequest.abort(); 
 
} 
 

 
var loadPage = function(page, storeHistory) { 
 
    if (typeof storeHistory === 'undefined') { 
 
     storeHistory = true; 
 
    } 
 

 

 
    lastRequest = $.ajax({ 
 
     url: "pages/" + page, 
 
     cache: false, 
 
     success: f$.ajax({ 
 
    url: "pages/" + page, 
 
    cache: false, 
 
    success: function(resultFirst) { 
 
     afficher(resultFirst); 
 
     if (storeHistory === true) { 
 
      history.pushState({ 
 
       'key': 'value', 
 
       'url': page 
 
      }, '', page); 
 
     } 
 
     $.ajax({ 
 
      
 
      // How can i define pageIn variable ?? 
 
      
 
      url: "pages/" + pageIn, 
 
      cache: false, 
 
      success: function(resultSecond) { 
 
      afficher(resultSecond); 
 
      } 
 
     }); 
 
    }, 
 
    error: function(XMLHttpRequest, textStatus, errorThrown) { 
 
     afficher('erreur lors du chagement de la page'); 
 
    } 
 
}); 
 

 
    return false; 
 
}; 
 

 
window.addEventListener('load', function() { 
 
    setTimeout(function() { 
 
     window.addEventListener('popstate', function(e) { 
 
      if (e.state === null) { 
 
       loadPage('home.php'); 
 
      } else { 
 
       loadPage(e['state']['url'], false); 
 
      } 
 
     }); 
 
    }, 0); 
 
}); 
 

 
    
 
    // link inside index.php 
 

 
$('.link').bind('click', function(e) { 
 
    e.preventDefault(); 
 
    var page = $(this).attr('href'); 
 
    loadPage(page); 
 
    return false; 
 
}); 
 

 
    // second link inside called page 
 
    
 
    $('.link-in').bind('click', function(e) { 
 
    e.preventDefault(); 
 
    var pageIn = $(this).attr('href'); 
 
    loadPage(pageIn); 
 
    return false; 
 
});

+1

目前尚不清楚你想要做什么,但是我感觉你在被叫网页上绑定了一些事件,甚至在你叫它之前。在获得页面后,您应该将点击绑定到链接。 –

+0

我只想在第一个之后做一个其他的ajax请求,比如:我现在调用work.php,然后从work.php中调用work-slider.php,然后用work-slider.php替换work.php ajax-container div在我的index.php – Tiaw

+0

你的意思是你想从你在服务器端获得的PHP页面发出ajax调用? Mmmmhhhhh –

回答

0

如果如果dinamically插入到DOM页面加载后。链路,在标签, bind()方法将失败:bind()将侦听器附加到它在调用时找到的元素。如果在绑定调用之后添加新的elemenent,它将不会收到监听器绑定。

为了防止当在一个页面中插入dinamically的HTML代码,您应该使用()方法:

$('body').on('click' , '.link-in', function(e) { 
    e.preventDefault(); 
    var pageIn = $(this).attr('href'); 
    loadPage(pageIn); 
    return false; 
    }); 

而现在,你dinamically推体内每一个。链路,在标签会回应到点击监听器。关于默认使用on()而不是bind()的讨论实际上在bind() documentation中找到。