1

我是 ajax 和 php 的新手，如果您能帮助我，我将不胜感激。看到我只知道一点javascript和php，我真的不知道如何解决这个问题，请你帮帮我！我一直在寻找解决方案，但找不到任何解决方案，希望我的搜索将在这里停止。我会尽力解释清楚。

我想要这个：

<a href="#" onClick="return false" onmousedown="javascript:swapContent('con1');">load html page called ducks</a>

将一个名为ducks.html 的html 页面加载到myDiv 区域中。

当我点击这个时，我也想这样：

<a href="#" onClick="return false" onmousedown="javascript:swapContent('con2');">load a list of html links</a>

我希望它加载一个带有链接列表的 html 页面，单击该链接列表时将加载到 myDiv 区域而不重新加载整个页面。

最后我想设置 myphpscript php 文件。加载一个包含将出现在 myDiv 区域中的链接列表的页面，当我单击其中一个链接时，它同样会加载到 myDiv 区域中。

这是我的代码

<!-- This is your PHP script... myphpscript.php --> 

<?php 
    $contentVar = $_POST['contentVar'];
    if ($contentVar == "con1") {
        include 'con2.html'; 
    } else if ($contentVar == "con2") {
        echo "<a href='con2'>View</a>";
    } else if ($contentVar == "con3") {
        echo "Content for third click is now loaded. Any <strong>HTML</strong> or text you  wish.";
    }
?>

<!-- This is the rest of my code -->

<html>
    <head>
        <script type="text/javascript" src="jQuery-1.5.1.js"></script>
        <script language="JavaScript" type="text/javascript">
        <!--
            function swapContent(cv) {
                $("#myDiv").html('<img src="loader.gif"/>').show();
                var url = "myphpscript.php";
                $.post(url, {contentVar: cv} ,function(data) {
                    $("#myDiv").html(data).show();
                });
            }
        //-->
        </script>
        <style type="text/css"> 
            #myDiv {
                width:200px; height:150px; padding:12px; 
                border:#666 1px solid; background-color:#FAEEC5; 
                font-size:18px;
            } 
        </style> 
    </head>
    <body>
        <a href="#" onClick="return false"  
           onmousedown="javascript:swapContent('con1');">Content1</a>
        <a href="#" onClick="return false" 
           onmousedown="javascript:swapContent('con2');">Content2</a>
        <a href="#" onClick="return false" 
           onmousedown="javascript:swapContent('con3');">Content3</a>
        <div id="myDiv">My default content for this page element when the page initially loads</div>
    </body>
</html>
4

4 回答 4

1

在我看来，如果您希望在单击某些内容时加载外部页面，则需要执行 ajax GET 或 POST 请求，然后将结果打印到 div：

http://api.jquery.com/jQuery.post/

如果您只想将 div 的内容更改为其他文本，可以使用 jQuery.html 之类的内容：http: //api.jquery.com/html/

<script>
$("#idForLink").click(function () {
  var htmlStr = "The new text to show";
  $('#myDiv').text(htmlStr);
});
</script>

在不使用 jQuery 的情况下，您上面的示例将自己的帖子发送到 echo contentVar，这将始终刷新页面。

于 2012-06-25T14:32:33.237 回答
0

如果您只是从另一个文件中获取 HTML，我会使用 load 方法，因为它既快速又简单：

$(document).ready(function(){
    $('#myDiv').load("someFile.html");
});

对于更广泛的请求，您可以使用 Post 和 Get。它们允许您通过 URL 请求传递数据，以影响返回的结果。显然，您请求的 URL 需要是 PHP/ASP 并在这种情况下处理请求。

于 2012-06-25T14:42:47.810 回答
0

JAVASCRIPT：

<script type="text/javascript">
$(document).ready(function(){

   // this is your mouse event (click) listener
   $('.destination_div').on('click','a',function() {
       var url = $(this).attr("href");
       $('.destination_div').load(url);
       return false;
   });

});​
</script>

使您的 HTML 锚点简单，不要包含内联 javascript，因为 on("click") 已经处理了它。

HTML：

<a href="http://yourhtml_containing_links.html">Your HTML with links</a>
于 2012-06-25T14:57:10.337 回答
0

请参阅此小提琴以jquery+css解决您的问题 [不需要 PHP]：http: //jsfiddle.net/bYNeg/

于 2012-06-25T15:23:12.813 回答