Nasıl div öğeleri oluşturmak ve doldurmak için ajax ve PHP kullanmak?

4 Cevap php

I here daha önce benzer bir soru sordu, ve bunun doğru yolda beni aşağı var, ama ben hala çok az stumped. Ancak, şimdi ben bir daha eğitimli soru sormak için biliyorum.

Ben ÜRÜNLER bir tablo adı, ben bağlanmak bir veritabanı var. ÜRÜNLER içindeki sütunlar kimliği, STOK, ShortName, açıklaması, fiyat ve DENİZCİLİK vardır.

Kullanıcı bir düğmeyi tıklattığında, ben ÜRÜNLER tüm satırları bulmak için bir istek göndermek gerekiyor. Ben şu file.php (DB kod göstermek değil bağlamak) olduğunu gerçekleştirir inanıyorum.

$query = "SELECT `ID` FROM `PRODUCTS`";
$result = mysql_query($query) or die('Query failed:'.mysql_error());
$num=mysql_numrows($result);

Kullanıcı düğmesini tıklar ve o $ num aldığında, o zaman satır vardır gibi birçok div öğeleri oluşturmak gerekiyor. I for() ile yapabilirsiniz, ama ben bunu nasıl% 100 emin değilim. Ayrıca, ben yerine sadece JS, Jquery bunu nasıl emin değilim.

function ajaxFunction(phpFunction){
    var ajaxRequest;  

    try{
                ajaxRequest = new XMLHttpRequest();
    } catch (e){
                    try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                alert("Your browser broke!");
                return false;
            }
        }
    }
    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){


for (var i = 0; i < ajaxRequest.responseText ; i++)
//Create Div code here


        }
    }


    var url = "file.php;

    ajaxRequest.open("GET", url, true);
    ajaxRequest.send(null); 
}

Yani burada son sorular şunlardır:

  1. Bir kullanıcı belirli bir div tıklarsa (#revealProductButton), nasıl ben $num döner gibi birçok divs oluşturabilirim?
  2. Nasıl DB ekranı oluşturulan bu divs STOCK, PRICE, and SHIPPING yapabilirim? Her div o kendi bilgilerini, her şeyi görüntüler sadece bir div göstermek gerekir.
  3. Kullanıcı daha sonra oluşturulan divlere birini tıklarsa, nasıl sonra DB (TANIMI, vb) bilginin geri kalanını ortaya, ama sadece tıklanan div için?
  4. Nasıl benim file.php bu ile çalışmak için yazmak?

4 Cevap

Böyle bir şey gidebilir:

for (var i = 0; i < ajaxRequest.responseText ; i++)
{
  var div = document.createElement("div");
  var doc = document.getElementsByTagName("body")[0];
  doc.appendChild(div);
  div.setAttribute("id", "div_" + i);

  // now some php code to get STOCK, PRICE, and SHIPPING through sql queries
  // ...........................
  // ...........................
  // ...........................

  // javascript again
  document.getElementById("div_" + i).innerHTML = <?php echo $price, $shipping, etc in any way you want?>;

  div.onclick = function()
  {
    // again php code to get more info like DESCRIPTION
    //..................

    document.getElementById("div_" + i).innerHTML += '<br /><br />' + <?php echo $description?>;
  };
}

Umut olur.

Kolay yolu bu gibi bir şey olacaktır:

function fetchData(){
  var url = 'file.php';
  // The jQuery way to do an ajax request
  $.ajax({            
    type: "POST",
    url: url,
    data: "", // Your parameters here. (like "dummy=1&sort=description")
    success: function(html){
      // html contains the literal response from the server
      $("#result").html(html);
    }
  });
}

Php script tepki # sonucu doğrudan yazılır.

Şimdi php tarafında sadece çıkış html yapabilirsiniz:

$result = mysql_query($myQuery);
while ($row = mysql_fetch_assoc($result)) {
  echo '<div>'.$row['description'].'</div>';
}

Bu sadece bir hızlı 'n kirli bir yaklaşımdır. Bir alternatif daha javascript php script ve sürecin bir json nesnesi döndürmektir.

Kullanıcı bir düğmeyi tıklattığında, ben ÜRÜNLER tüm satırları bulmak için bir istek göndermek gerekir

SELECT `ID` FROM `PRODUCTS`

Bu sorgu yalnızca, tüm kayıtları, tüm kayıt veri gelen ID değerleri alır, unutmayın. İstediğin bu mu?

Sorularınızı cevaplamak için:

1) PHP komut dosyası bir specfic biçimi iade edilmelidir, örneğin, XML veya JSON (ikincisi, IMHO tercih edilir). Niyet yeni bir DIV içine her çıkan kayıt sopa ise iade koleksiyonları sayısı, oluşturmak kaç DIV elemanları belirleyecektir. Örnek, bir JSON yanıt 10 unsurları ile bir koleksiyon (dizi) vardır. Sen dizideki her öğe döngü ve dizi boyutuna göre N DIV elemanları oluşturmak.

2) Eğer bu değerler için yeni bir DIV oluşturmak istediğinizden emin misiniz? Bir TABLO elemanı TR değil mi?

3) Bunu başlangıçta "gizli" olduğunu bir şekilde dönen verileri biçimlendirmek ve diğer verileri "açığa" bu kayıt verileri ilgili ana DIV elemanı için bir onclick işleyicisi kullanmak istiyorum. Bu sayfada hepsi, sadece gizlidir, yeni bir XHR çağrısı yaratmak gerekmez.

4) Birçok Ajax ile ilgili dersler çevrimiçi vardır. Birini bulun ve müdahalesi başlar. Diğer bir deyişle, burada birkaç satır dışarı kazımak için biraz karmaşık.

Ben normalde JS kütüphane trenine atlamak olmasa da, bunu bir çırpıda bu görevleri yapacak, jQuery bakmak isteyebilirsiniz. Ancak, altta yatan JS kodu ve nasıl istek yapılır anlamalıdır.

Eğer jQuery çerçeve söz konusu olduğundan, neden javascript çiftleşmiş kullanarak düşünmüyorsunuz? Bu sadece HTML divs (ve çocuklarının tümü) oluşturmak ve bunları gerektiğinde rasgele verilerle bunları doldurmak için izin verir.

Gidin ve http://aefxx.com/jquery-plugins/jqote, bu yukarıda belirtilen yapmak sağlayan bir jQuery eklentisi var bir göz atın.

Siz jQuery bu gibi kullanabilirsiniz:

<script type="text/html" id="template">
    <![CDATA[
        <div class="product">
            <a href="...">Product ID: <%= this.id %></a>
        </div>
    ]]>
</script>

<script type="text/javascript">
    // Let's pretend your ajax call returns an array in json notation like so:
    // [{"id": "1", "shortname": "Shoe"}, {"id": "2", "shortname": "Shirt"}]
    $.ajax({
        url: '/file.php',
        ....
        success: function(data) {
            $('#template').jqote(data).appendTo('#container');
        }
    });
</script>

This would give you to divs that are appended to an element with the ID "container" which are populated with data returned from your database.

Hope I could help. cheers

etiketler