将AJAX响应分成多个Div

时间:2015-11-05 18:18:52

标签: javascript php jquery html ajax

我之前提过这个问题,但并没有说得对。我正在使用以下代码的实时搜索示例:

<script>
    function showResult(str) {
        if (str.length==0) { 
            document.getElementById("livesearch").innerHTML="";
            document.getElementById("livesearch").style.border="0px";
            return;
        }
        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) {
                document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
                document.getElementById("livesearch").style.border="1px solid #A5ACB2";
            }
        }
        xmlhttp.open("GET","livesearch.php?q="+str,true);
        xmlhttp.send();
    }
</script>

这会将livesearch Div的内容设置为php脚本livesearch.php回显的项目列表。这非常接近我的目标,但我实际上希望每个回显的项目都在他们自己的可扩展div中,例如JQuery example

我的返回字符串如下所示:

Title 1
Info 1 about title 1
Info 2 about title 1
Title 2
Info 1 about title 2
Info 2 about title 2

这是livesearch.php:

<?php    
    $xmlDoc=new DOMDocument();
    $xmlDoc->load("spells.xml");

    $x=$xmlDoc->getElementsByTagName('title');
    $y=$xmlDoc->getElementsByTagName('type');
    $z=$xmlDoc->getElementsByTagName('casting');
    $a=$xmlDoc->getElementsByTagName('range');
    $b=$xmlDoc->getElementsByTagName('description');

    $q=$_GET["q"];

    $hint="";
    $results = array();

    for($i=0; $i<($x->length); $i++) 
    {
        if(stristr($x->item($i)->nodeValue,$q))
        {
            array_push( $results, $i );
        }
    }

    foreach( $results as $result )
    {
        echo '  <div>';
        echo '      <h1>'.$x->item($result)->nodeValue.'</h1>';
        echo '      <p>Type: '.$y->item($result)->nodeValue.'<br>';
        echo '      Time: '.$z->item($result)->nodeValue.'<br>';
        echo '      Range: '.$a->item($result)->nodeValue.'<br>';
        echo '      Description: '.$b->item($result)->nodeValue.'</p>';
        echo '  </div>';
    }
?>

目前,它们都作为单个字符串回显。我不太确定如何将字符串的每一行分成它自己的Div。

有谁知道怎么做?任何正确方向的提示都会非常感激。

1 个答案:

答案 0 :(得分:0)

Mike Brant在评论中的回答是返回可以使用Javascript修改的json。这是一个更容易的解决方案。谢谢!