Как использовать ajax и PHP для создания и заполнения элементов div?

Question

Я задавал подобный вопрос ранее здесь , и это привело меня в нужное русло, но я все еще немного озадачен. Однако теперь я знаю, как задать более образованный вопрос.

У меня есть база данных, к которой я подключаюсь, с именем таблицы PRODUCTS. В ПРОДУКТАХ есть столбцы ID, STOCK, SHORTNAME, ОПИСАНИЕ, ЦЕНА и ДОСТАВКА.

Если пользователь нажимает кнопку, мне нужно отправить запрос, чтобы найти все строки в ПРОДУКТАХ. Я полагаю, что следующий файл .php выполняет это (код подключения к БД не отображается).

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

Когда пользователь нажимает кнопку и получает $ num, ему нужно создать столько элементов div, сколько есть строк. Я могу сделать это с for(), но я не уверен на 100%, как это сделать. Кроме того, я не уверен, как это сделать в Jquery, а не только в JS.

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); 
}

Итак, вот заключительные вопросы:

1. Если пользователь нажимает на определенный div (#revealProductButton), как мне создать столько div, сколько возвращает $num?
2. Как мне сделать, чтобы те созданные div'ы отображали STOCK, PRICE, and SHIPPING из БД? Каждый div должен отображать свою собственную информацию, а не только один div, отображающий все.
3. Если пользователь затем щелкает один из созданных элементов div, как я могу затем раскрыть остальную информацию в БД (ОПИСАНИЕ и т. Д.), Но только для элемента div, по которому был выполнен щелчок?
4. Как мне написать свой file.php для работы со всем этим?

Answer 1

Самый простой способ будет выглядеть примерно так:

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 будет записан непосредственно в # result.

Теперь на стороне php вы можете просто вывестиhtml:

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

Это просто быстрый и грязный подход.Альтернатива - вернуть объект json из сценария php и обработать его далее в javascript.

Answer 2

Вы можете пойти примерно так:

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?>;
  };
}

Надеюсь, это поможет.

Answer 3

Поскольку вы упомянули инфраструктуру jQuery, почему бы не рассмотреть возможность использования шаблонов javascript?Это позволяет вам просто создавать элементы div (и всех их дочерних элементов) в HTML и заполнять их произвольными данными, когда они вам нужны.

Идите и посмотрите на http://aefxx.com/jquery-plugins/jqote, этоплагин jQuery, который позволяет вам делать вышеупомянутое.

Вы бы использовали его в jQuery следующим образом:

<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>

Это даст вам элементы div, которые добавляются к элементу сИдентификатор «контейнера», который заполняется данными, возвращенными из вашей базы данных.

Надеюсь, что смогу помочь.ура

Answer 4

Если пользователь нажимает кнопку, мне нужно отправить запрос, чтобы найти все строки в ПРОДУКТАХ

SELECT `ID` FROM `PRODUCTS`

Обратите внимание, этот запрос извлекает только значения ID из всех записей, а не из всех данных записей. Это то, что вы хотите?

Чтобы ответить на ваши вопросы:

1) PHP-скрипт должен возвращать определенный формат, например, XML или JSON (последнее предпочтительнее, ИМХО). Количество возвращаемых коллекций будет определять, сколько элементов DIV вы создадите, если вы намереваетесь вставить каждую результирующую запись в новый DIV. Например, ответ JSON имеет коллекцию (массив) с 10 элементами. Вы перебираете каждый элемент массива и создаете N DIV элементов на основе размера массива.

2) Вы уверены, что хотите создать новый DIV для этих значений? Не TR элемент в ТАБЛИЦЕ?

3) Вы должны отформатировать возвращаемые данные таким образом, чтобы они изначально были «скрытыми», и использовать обработчик «onclick» для основного элемента DIV, связывающего эти записи, для «раскрытия» других данных. Это все на странице, оно просто скрыто, вам не нужно создавать новый вызов XHR.

4) В Интернете много учебных пособий по Ajax. Найти один и начать мастерить. Другими словами, здесь слишком сложно выделить несколько строк.

Хотя я обычно не использую библиотеку JS, вы можете захотеть взглянуть на jQuery, но это сделает эти задачи несложными. Однако вы должны понимать базовый код JS и то, как делается запрос.