Question

我正在寻找一些Yoda，就像我正在进行的项目的指导一样。我试图基于从php服务器读入的XML数据在网页中动态生成div。我的体重略高于学习成绩。

想知道是否有人能指出我正确的方向，或者给我一些指导，看看我是否在正确的轨道等。

XML im加载是......

 <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非常基本，它在加载body标签时调用了information（）函数。

我正朝着正确的方向前进吗？有人可以帮助我或推荐一个教程吗？

感谢您的时间

Answer 1

这是我用来从JSON动态创建HTML页面元素的客户端代码。

基本上我有一个从数据库中选择的服务器端脚本。数据库包含元素ID和内部HTML文本等内容。然后，数据在服务器端编码为JSON。在您的示例中，您使用XML但原理是相同的。

我将此代码保存到自己的名为"buildCategories.js"的javascript文件中：

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父元素并执行。

使用XML从JS动态创建HTML div

1 个答案: