使用AJAX更新页面

时间:2014-06-20 09:44:31

标签: php jquery ajax

在我的主页面上,我有一个名为logs.php的页面,我已经设置了使用jquery / ajax每4秒更新一次。这将更新本地存储的.xml文件的详细信息。

file_put_contents("../../scripts/xml/logs.xml", $dom) or print_r(error_get_last());

这是jQuery: -

$(function(){
setInterval(function(){
    $.ajax({
        url:'scripts/php/log.controller.php',
        success:function(data){
            if(data == "scripts/php/status.controller.php"){
            }else{
                alert(data);
        }
        }
    });
},4000);
});

当我alert(data);时,它会显示更新的XML文件的更改:

<?xml version="1.0"?>
<loglist resultcount="24"><log id="0"><messagedate>20/06/2014 10:34:48</messagedate><car></car><stat>Ping</stat><ping></ping><job>Operator</job><operator></operator><jobref></jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="1"><messagedate>20/06/2014 10:34:47</messagedate><car></car><stat>Ping</stat><ping></ping><job>Operator</job><operator></operator><jobref></jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="2"><messagedate>20/06/2014 10:34:35</messagedate><car>6</car><stat>Quit</stat><ping></ping><job>Operator</job><operator></operator><jobref></jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="3"><messagedate>20/06/2014 10:34:32</messagedate><car>8</car><stat>Ping</stat><ping></ping><job>Operator</job><operator></operator><jobref></jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="4"><messagedate>20/06/2014 10:34:31</messagedate><car>10</car><stat>Ping</stat><ping></ping><job>Operator</job><operator></operator><jobref></jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="5"><messagedate>20/06/2014 10:34:30</messagedate><car>3</car><stat>Ping</stat><ping></ping><job>Operator</job><operator></operator><jobref></jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="6"><messagedate>20/06/2014 10:34:28</messagedate><car>2</car><stat>Ping</stat><ping></ping><job>Operator</job><operator></operator><jobref></jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="7"><messagedate>20/06/2014 10:24:27</messagedate><car></car><stat>Ping</stat><ping></ping><job>Operator</job><operator></operator><jobref></jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="8"><messagedate>20/06/2014 10:15:16</messagedate><car>10</car><stat>Quit</stat><ping></ping><job>Operator</job><operator></operator><jobref></jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="9"><messagedate>20/06/2014 10:14:01</messagedate><car>4</car><stat>Quit</stat><ping></ping><job>Operator</job><operator></operator><jobref></jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="10"><messagedate>19/06/2014 14:07:35</messagedate><car></car><stat>Ping</stat><ping></ping><job>Operator</job><operator></operator><jobref></jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="11"><messagedate>19/06/2014 13:43:54</messagedate><car></car><stat>Ping</stat><ping></ping><job>Operator</job><operator></operator><jobref></jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="12"><messagedate>19/06/2014 13:42:58</messagedate><car>1</car><stat>Disp</stat><ping></ping><job>100 BLYTHE ROAD</job><operator></operator><jobref>220213</jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="13"><messagedate>19/06/2014 13:42:57</messagedate><car>9</car><stat>Disp</stat><ping></ping><job>4 LILESTONE STREET; LONDON</job><operator></operator><jobref>220620</jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="14"><messagedate>19/06/2014 13:42:56</messagedate><car>8</car><stat>Disp</stat><ping></ping><job>4 LILESTONE STREET; LONDON</job><operator></operator><jobref>220618</jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="15"><messagedate>19/06/2014 13:42:56</messagedate><car>6</car><stat>Disp</stat><ping></ping><job>3P+3HL 22 MOUNT STREET</job><operator></operator><jobref>221165</jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="16"><messagedate>19/06/2014 13:42:54</messagedate><car>5</car><stat>Disp</stat><ping></ping><job>GODOLPHIN LETYMER SCHOOL ,  IFFLEY ROAD</job><operator></operator><jobref>220211</jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="17"><messagedate>19/06/2014 13:42:53</messagedate><car>4</car><stat>Disp</stat><ping></ping><job>32 ABERDEEN PLACE</job><operator></operator><jobref>220774</jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="18"><messagedate>19/06/2014 13:42:52</messagedate><car>2</car><stat>Disp</stat><ping></ping><job>45 LOCKBRIDGE COURT  WOODFIELD ROAD</job><operator></operator><jobref>221121</jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="19"><messagedate>19/06/2014 13:42:50</messagedate><car>89</car><stat>Disp</stat><ping></ping><job>C------  GATWICK AIRPORT NORTH___EZY 8894__MARACUS</job><operator></operator><jobref>220793</jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="20"><messagedate>19/06/2014 13:42:48</messagedate><car>43</car><stat>Disp</stat><ping></ping><job>183 EDGWARE ROAD; LONDON</job><operator></operator><jobref>221193</jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="21"><messagedate>19/06/2014 13:42:45</messagedate><car>32</car><stat>Disp</stat><ping></ping><job>BEST WESTBURY SHAFTESBURY HOTEL, 27 DEVONSHIRE TERRACE</job><operator></operator><jobref>220989</jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="22"><messagedate>19/06/2014 13:42:43</messagedate><car>111</car><stat>Disp</stat><ping></ping><job>22/17 ST. EDMUNDS TERRACE; LONDON</job><operator></operator><jobref>220973</jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log><log id="23"><messagedate>19/06/2014 13:42:42</messagedate><car>10</car><stat>Disp</stat><ping></ping><job>WESTMINSTER ACADEMY;255 HARROW ROAD</job><operator></operator><jobref>220617</jobref><gpsx></gpsx><gpsy></gpsy><carspeed></carspeed></log></loglist>

但是页面logs.php没有按原样更新。

logs.php文件填充列表如下: -

<ul id="loglist" class="main-logs"></ul>


<script type="text/javascript">
$(document).ready(function(){

    $.ajax({
        type: "GET",
        url: 'scripts/xml/logs.xml',
        datatype: "xml",
          success: function(xml) {
            var select = $('#loglist');         
            $(xml).find('log').each(function(){                                         
            var car = $(this).find('car').text();
            var stat = $(this).find('stat').text();
            var job = $(this).find('job').text();
            select.append("<li>"+car+' - '+stat+' - '+job+"</li>");
          });
        }
    });

});
</script>

任何人都知道为什么不更新?

2 个答案:

答案 0 :(得分:1)

我在小提琴上尝试了你的例子,如果xml是一个字符串,它似乎工作得很好。尝试将dataType参数更改为string而不是xml,它应该有效。

以下是我的示例:http://jsfiddle.net/8gEAN/

试试这个:

<html>
<body>
    <!--list to update-->
    <ul id="loglist" class="main-logs"></ul>
    <script type="text/javascript">
        $(document).ready(function(){

                $(function(){
                    //every 4 seconds send an ajax request to update the XML file
                    setInterval(function(){
                            $.ajax({
                                    url:'scripts/php/log.controller.php',
                                    success:function(data){
                                        //when the XML is updated, send another ajax request to retrieve it and update the list
                                        $.ajax({
                                            type: "GET",
                                            url: 'scripts/xml/logs.xml',
                                            datatype: "string",
                                                success: function(xml) {
                                                    var select = $('#loglist');         
                                                    $(xml).find('log').each(function(){                                         
                                                    var car = $(this).find('car').text();
                                                    var stat = $(this).find('stat').text();
                                                    var job = $(this).find('job').text();
                                                    select.append("<li>"+car+' - '+stat+' - '+job+"</li>");
                                                });
                                            }
                                        });
                                    }
                            });
                    },4000);
                });
        });
    </script>
</body>

答案 1 :(得分:0)

将以下函数放入ajax调用中。这可能是缓存问题。

$.ajaxSetup ({
    // Disable caching of AJAX responses
    cache: false
});

more details