Aşağıdaki ajax elde etmek için nasıl

3 Cevap php

Ben php ile çalışan ve aşağı üstüne bir damla bir sayfa var istiyorum duyuyorum. damla aşağı öğeler onlarla ilgili bazı id var. Damla altında aşağı bir metin kutusu ve metin kutusu altında bazı görüntüler. böylece aşağıdaki gibi

<drop down box>
______________
<textbox _content_ loaded via ajax onchange of drop down box>
<some images loaded via ajax onchange of drop down box>

Ben menü değişti aşağı DB her damla sorgulamak ve DB bilgileri ile metin kutusunu doldurmak ve DB getirilen vardı görüntüleri yüklemek istiyorum.

Bunun için kullanılabilecek bazı ajax kütüphane var? Ben sorguyu yürütmek ve geri ana sayfaya sonucu göndermek için bir php sayfası var olacak varsayıyorum?

Siz Ben bakıyor olmalıdır bana bazı örnekler / öğreticiler söyleyebilirim.

3 Cevap

Kolay yolu kullanarak Jquery. Edilir Örneğin böyle bir şey yapabilirdi.

$('#dropdown').change(function(){ //listen for the change event of #dropdown box
	$.get('example.com/script.php', 
		{$('#dropdown').val()}, //send the value of dropdown as GET parameter 'val'
		function(data){
		$('#content').html(data.content);
		//first clear the image area:
		$('#imgs').empty();
		//Insert all the images
		for(x in data.imgs){
			$('#imgs').append('<img src="'+data.imgs[x]+'">');
		}
	}, 'json');
});

Yani HTML şöyle supposing:

<select id='dropdown'>
	<option value='1'>Option1</option>
	<option value='2'>Option2 etc.</option>
</select>

<div id='content'>I contain the content, I might as well be a textarea or something else, as long is my id='content'</div>
<div id='imgs'><img src='iContainImgs.jpg'></div>

Ardından sunucu tarafta aşağıdaki yapıda bir Json nesnesi oluşturmak:

content: "all the content",
imgs: array('img1.jpg', 'img2.jpg', 'etc')

Short answer: jQuery. Here's an example of how to deal with dropdown controls in jQuery

http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/

Bunu yapabileceği bir yolu prototip kütüphane kullanmaktır.

Eğer çıkış görüntü veya görüntüleri çıktılar metin ve sayfa için HTML içeriği bir sayfa var varsayarsak, aşağıdaki gibi bir şey yapardı:

<script type="text/javascript" src="javascript/prototype.js">
<script type="text/javascript">
function select_changed() {
    // get the selected value
    var parms = 'selection='+$F('selectbox');
    // request the textbox value and pop it into the textbox
    new Ajax.Updater(
        'textbox',
        'http://example.com/textbox_handler.php',
        {
            method: 'post',
            parameters: parms
        });

    // request the image(s) and pop them into the image container div
    new Ajax.Updater(
        'image_container',
        'http://example.com/images_handler.php',
        {
            method: 'post',
            parameters: parms
        });
}

</script>

<select id="select" onChange="javascript:select_changed();">
    <option value="1">First Value</option>
    <option value="2">Second Value</option>
</select>

<textarea name="textbox"></textarea>

<div id="image_container"></div>

etiketler