Question

尝试将外部php文件加载到另一个onClick中。 iframes将无法正常工作，因为内容的大小随可折叠面板而变化。这留下了AJAX。我得到了一段代码

HTML

<a href="#" id="getData">Get data</a>
<div id="myContainer"></div>
JS

$('#getData').click(function(){
    $.get('data.php', { section: 'mySection' }, function(data){
       $('#myContainer').html(data);
    });
});
PHP:

<?php
    if($_GET['section'] === 'mySection') echo '<span style="font-weigth:bold;">Hello World</span>';
?>

我已经在http://www.divethegap.com/scuba-diving-programmes-dive-the-gap/programme-pages/dahab-divemaster/divemaster-trainingA.php进行了测试，并获得了最意想不到的结果。它肯定加载了正确的数量的项目，就像它在野生动物园的下栏中所说，但我看到三个小日历，就是这样。任何人都可以看到我犯了错误吗？

Answer 1

首先，您希望在就绪函数$(document).ready(function(){..}中包含jQuery位。在您的测试页面中，顶部已经有一个包含行$('a[rel*=facebox]').facebox()的就绪函数，因此您可能希望将代码放在那里。

其次，您希望阻止链接转到默认操作，即加载网址“＃”。您可以使用preventDefault()方法执行此操作。

我测试并确认以下代码适合您：

<script type="text/javascript">
  $(document).ready(function(){
    $('#getData').click(function(event){
      event.preventDefault();
      $.get('test.php', { cat: 16 }, function(data){
        $('#myContainer p').html(data);
      });
    });
});</script>

您可以找到jQuery's get function here的更多详细信息和示例。

Answer 2

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/本教程可以帮助您

单击时将动态外部内容加载到另一个内容的Div中

2 个答案: