1

私は ajax と php の初心者です。助けていただければ幸いです。私はJavaScriptとPHPを少ししか知らないので、この問題を解決する方法が本当にわかりません。助けてください！修正を探していましたが、何も見つかりませんでした。うまくいけば、私の検索はここで終わります。私は説明で明確になるように最善を尽くします。

私はこれが欲しい：

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

myDiv 領域に、ducks.html という html ページをロードします。

これをクリックすると、次のようになります。

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

クリックすると、ページ全体をリロードせずに myDiv 領域にロードされるリンクのリストを含む html ページをロードしたいと思います。

そして最後に、myphpscript php ファイルをセットアップしたいと思います。myDiv 領域に表示されるリンクのリストを含むページをロードするには、それらのリンクの 1 つをクリックすると、同様に 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 を使用しない場合、上記の例は自己投稿を echocontentVarに送信し、常にページを更新します。

于 2012-06-25T14:32:33.237 に答える
0

別のファイルからHTMLを取得するだけの場合は、すばやく簡単にロードメソッドを使用します。

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

より広範なリクエストについては、PostおよびGetを使用できます。返される結果に影響を与えるために、URLリクエストでデータを渡すことができます。明らかに、要求されたURLはPHP / ASPである必要があり、この場合は要求を処理します。

于 2012-06-25T14:42:47.810 に答える
0

問題の解決策については、このフィドルを参照jquery+cssしてください[PHPは不要]：http：//jsfiddle.net/bYNeg/

于 2012-06-25T15:23:12.813 に答える
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>

on（ "click"）はすでにHTMLアンカーを処理しているため、HTMLアンカーをシンプルにします。インラインJavaScriptは含めないでください。

HTML：

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