Question

我正在创建一个页面，将数据库中的数据显示为div个元素。一开始，我想显示所有数据，如果用户在表单中输入内容，那么显示的数据将适合用户搜索结果。

我正在使用AJAX技术。

代码无法以所需方式运行，因为屏幕上没有div。我认为这与div的声明有关，但我不确定我哪里出错了。？

<script> 


    function getData1(search)
    {

        if(search=="")
        {

            var xmlhttp = new XMLHttpRequest();

             xmlhttp.onreadystatechange = function()
             {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                {
                    data = JSON.parse(xmlhttp.responseText);
                    fill1(data);

                }
            }; 

            xmlhttp.open("GET",'ex2.php?q=0', true);
            xmlhttp.send();

        }
        else
        {

            var xmlhttp = new XMLHttpRequest();

             xmlhttp.onreadystatechange = function()
             {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                {
                    data = JSON.parse(xmlhttp.responseText);
                    fill1(data);

                }
            }; 

            xmlhttp.open("GET",'ex2.php?q='+search, true);
            xmlhttp.send();



        }

    }

    function fill1(data)
    {

        parent = document.getElementById('contener');
        parent.innerHTML = "";


        for(i=0, len =data.length; i<len; i++)
        {


            var div = document.createElement('div');
            div.innerHTML = '<div class="tile" id='+data[i][0]+' onClick="detail(this.id)">


                                        +'<div class="date"><i class="icon-calendar"></i>'+data[i][3]+'</div>'
                                        +'<div class="features">'

                                            +'<div id="distance" class="sq">'

                                                +'<div class="img"><i class="icon-distance"></i></div>'
                                                +'<div class="description">'+data[i][1]+' km</div>'
                                                +'<div style="clear:both"></div>'

                                            +'</div>'
                                            +'<div id="time" class="sq">'

                                                +'<div class="img"><i class="icon-time"></i></div>'
                                                +'<div class="description">'+data[i][2]+'</div>'
                                                +'<div style="clear:both"></div>'

                                            +'</div>'
                                            +'<div id="velocity" class="sq">'

                                                +'<div class="img"><i class="icon-velocity"></i></div>'
                                                +'<div class="description">'+data[i][4]+' km/h</div>'
                                                +'<div style="clear:both"></div>'

                                            +'</div>'
                                            +'<div style="clear:both"></div>'

                                        +'</div>'

                                    +'</div>';


            parent.append(div);

        }


    }


    $('document').ready(getData1(""));

</script>

HTML部分

<div id="contener"></div>
<div id="search">

    <form>

        <input type="text" onkeyup="getData(this.value)">

    </form>

</div>
<div style="clear:both"></div>

Answer 1

首先是第一件事。

您正在getData()上调用onkeyup="getData(this.value)"函数，而在script tag中您有一个名为getData1()的函数。我猜有一个错字。

首先将此onkeyup="getData(this.value)"更改为 onkeyup="getData1(this.value)"

此外，您在语句terminotor中调用的函数没有$('document').ready(getData1(""));它应该是

$(document).ready(function() {
        getData1('');
});

最后，您错过了结尾apostrophe

div.innerHTML = '<div class="tile" id='+data[i][0]+' onClick="detail(this.id)">

应该是

 div.innerHTML = '<div class="tile" id='+data[i][0]+' onClick="detail(this.id)">'

Answer 2

为什么不使用http://api.jquery.com/jquery.ajax

它比较简单，一个例子

$.ajax({
      url: "yourActionUrl",
      data: {name: value},
      type: "GET"
      }).success(function(result){
             $("#search").html(result);
      }

Answer 3

如果你要使用jQuery，你可以简单地在这些方面做点什么 -

//Loop this for all the data you receive
$("#container").append("<div class='..'>{Everything you need}</div>");

你确定你的AJAX正在返回数据吗？这也可能是一个问题。检查AJAX调用返回的数据并发布你在这里发布的内容。

如何正确地将div添加到现有div？

3 个答案: