динамическое создание HTML-дивов с помощью JS из XML - PullRequest
Новая
       1

динамическое создание HTML-дивов с помощью JS из XML

0 голосов
/ 10 июля 2011

Я ищу Йоду как руководство по проекту, над которым я работаю.Я пытаюсь динамически генерировать div на веб-странице, основанной на данных XML, которые считываются с php-сервера.Я пробиваю немного выше своего веса опыта, который хорош для обучения.

Интересно, может ли кто-нибудь направить меня в правильном направлении в качестве учебного пособия или дать мне некоторое руководство, чтобы увидеть, нахожусь ли я на правильном пути и т.д.

XML, который я загружаю в это ... 

 <item>
      <id>1</id>
      <name>Johnothan</name>
      <message>hello world</message>
 </item>
 <item>
      <id>2</id>
      <name>Fredrico</name>
      <message>hello world</message>
 </item>...etc

Моя функция Ajax для вызова. 

    function ajax(site, params){
  var xmlhttp;
  var i;
  if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
     }
   else
 {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
       }
  xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
  xmlDoc=xmlhttp.responseXML;   
   }
    } 


  xmlhttp.open("POST", site, false);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');


  xmlhttp.send(params);
    }

Генерация JS Div 

 function information(){

 xmlReturned =  xmlDoc.getElementsByTagName("item");

 for (i=0; i<xmlReturned.length; i++){

 newDiv(i);




 function newDiv(i){
 var id = xmlReturned[i].getElementsByTagName("id")[0].firstChild.nodeValue;
 var name = xmlReturned[i].getElementsByTagName("name")[0].firstChild.nodeValue;
 var message = xmlReturned[i].getElementsByTagName("message")[0].firstChild.nodeValue;


 //Now im trying to place the dynamic XML information within a table with in a new DIV in the HTML.



 }

Мой HTML довольно простой, он вызывает функцию information () с загрузкой тега body.

Я смотрю в правильном направлении ??Кто-нибудь может мне помочь или порекомендовать учебник?

Спасибо за ваше время

1 Ответ

1 голос
/ 10 июля 2011

Это код на стороне клиента, который я использую для динамического создания элементов HTML-страницы из JSON.

В основном у меня есть серверный скрипт, который выбирает из базы данных. База данных содержит такие вещи, как идентификаторы элементов и внутренние HTML-тексты. Затем данные кодируются как JSON на стороне сервера. В вашем примере вы используете XML, но принцип тот же.

Я сохраняю этот код в своем собственном файле JavaScript, который называется "buildCategories.js": 

buildAjaxRequest = function()

{
/*create an ajax variable*/
var ajaxRequest; 


try
{
    // Opera 8.0+, Firefox, Safari
    ajaxRequest = new XMLHttpRequest();
} 

catch (e)
{
    // Internet Explorer Browsers
    try
    {
        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } 

    catch (e) 
    {
        try
        {
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } 

        catch (e)
        {
            /* Something went wrong*/
            alert("Your browser does not support AJAX!");

            /* do nothing*/
            return false;
        }
    }
}
return ajaxRequest;
};


buildcategories = function()
{
var ajaxRequest = buildAjaxRequest();

  // run on development box
  var url = "urlToTheJSONEncodingScript";   

        /*go ajax go!*/
        ajaxRequest.open("GET", url, true);
        ajaxRequest.send(null); 


    ajaxRequest.onreadystatechange=function()
    { 
        if (ajaxRequest.readyState==4 && ajaxRequest.status==200 || ajaxRequest.status==0)
            {
            var categoriesObject = JSON.parse(ajaxRequest.responseText); 

            // example of how to retrive the data

            //theParentElementYouWantToAppendTo
            var list = document.getElementById("theParentElementYouWantToAppendTo");

            for (i=0;i<categoriesObject.Categories.length;i++)
            {
            newElement = categoriesObject.Categories;
            // The div you are dynamically creating 
            listRow = document.createElement("div");

            listRow.id = newElement[i].categoryID;
            listRow.innerText = newElement[i].category_desc;
            listRow.className = "theClassYouWantToUse";

                    //theParentElementYouWantToAppendTo.appendChild(theDivYouCreated)               
                    list.appendChild(listRow);


            } // end for


            }//

    }
};

buildcategories(); // VERY IMPORTANT. SELF EXECUTING FUNCTION!

Последний кусок - просто вставить в ваш HTML что-то вроде 

<div id="theParentElementYouWantToAppendTo">
    <script language="JavaScript" type="text/javascript" src="buildCategories.js"></script>
</div>

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

...