Basit ajax onclick soru

3 Cevap php

Ben zorluk div kutusunda sonuçları görüntüler basit bir menü kurma yaşıyorum:

I have a list of 10 links which link to php files on my server that return data. I would like it so that when the viewer clicks on one of the links, the data from the php file will display on a div box on the screen, and then when he clicks on another link, it will display the data from that php file in the div box (replacing the previous text).

Ben bu oldukça basit olduğunu biliyorum, ama ben o iş için alınamıyor. JQuery kullanıyorum ve sizin herhangi bir hızlı çözüm varsa bilmek istiyorum.

Teşekkürler!

GÜNCELLEME: Ben hemen hemen javascript kodu-bilge başarısız oldum. Ama burada çerçeve için temel fikirdir:

 <div class="tabs">
        <ul class="tabNavigation" style="float:left; padding:1px;">
            <li><a href="#displayphpfile">Load phpfile1</a></li>
            <li><a href="#displayphpfile">Load phpfile2</a></li>
            <li><a href="#displayphpfile">Load phpfile3</a></li>
        </ul>
        <div id="displayphpfile">
            <p>Load phpfile1</p>
        </div>
    </div>

3 Cevap

load (): jQuery bunu yaparken için özel bir yöntemi vardır.

Biraz olsa örneğini değiştirmek istiyorsunuz, bu yüzden bağlantıların HREF'ler php dosyaya işaret etmektedir:

<div class="tabs">
    <ul class="tabNavigation" style="float:left; padding:1px;">
        <li><a href="phpfile1.php">Load phpfile1</a></li>
        <li><a href="phpfile2.php">Load phpfile2</a></li>
        <li><a href="phpfile3.php">Load phpfile3</a></li>
    </ul>
    <div id="displayphpfile">
        <p>Load phpfile1</p>
    </div>
</div>

Sonra kod çok basit:

$(document).ready(function() {
   $(".tabNavigation a").click(function() {
      $("#displayphpfile").load($(this).attr("href"));

      return false;
   });
});

Ben bu test değil, ama bu ne istediğinizi yakın?

<script type="text/javascript">
    $(document).ready(function() {
    	$('a').click(function() {
    		var file = $(this).text().toLowerCase() + '.php';
    		$.ajax({
    			url:file,
    			cache:false,
    			success: function(response) {
    				$('#data_goes_here').html(response);
    			}
    		});
    		return false;
    	});
    });
</script>
<ol>
    <li><a href="#">Foo</a></li>
    <li><a href="#">Bar</a>
    <li><a href="#">Baz</a></li>
</ol>

<div id="data_goes_here"></div>

Iki ayaklı Shark bir tıklama öğenin içinde bir document.ready çağırıyor!

Bu olmalıdır:

<script type="text/javascript">
    $(document).ready(function() {
        $('a').click(function() {
            var file = $(this).text().toLowerCase() + '.php';
            $.ajax({
                    url:file,
                    cache:false,
                    success: function(response) {
                            $('#data_goes_here').html(response);
                    }
                });
            return false;
            });
        });
</script>

Ama yük yöntemi çok temiz kodudur.

etiketler