通过使用json或html文件使用jQuery ajax自动刷新/更新表

Question

所以@SOF

我一直在努力使我的学校成绩，成绩，预计成绩等网页具有自动更新功能，以便在通过使用jquery和来获得新数据时刷新页面上的数据，并且ajax“查看”。

我的主要问题是我无法正常使用任何形式的Ajax刷新/加载，我可以将输出生成为json或单个html文件，出于我的目的，我认为json会更好，但我不确定。

我的网页在左上角有一个导航助手，它是一个下拉菜单，该菜单通过“搜索”找到的列表填充<a id="CLASS1" optionname="CLASS 1"></a>，可以在表中找到该列表，但是如果需要，我可以在表外填充该菜单。需要。

我非常希望能够使我们在这个例子中一共有8种选择，包括必须修改下拉- Select Class -，Class 1，Class 2，Class 3，Class 4，Class 5， All Updating ， All Non-Updating

全部更新

• 此选项会将所有班级加载到一个html可见页面中，并每30秒更新一次每个班级（我说每个班级，因为某些班级可能会在一小时内更新，而其他班级可能会在不同的小时内更新），因此需要进行比较并如果不同则更新？

全部非更新

• 该选项会将所有类的内容加载到一个html可见页面中，但是除非用户单击其他类（使用下拉菜单）然后单击返回，否则 不会 更新。

1级，2级，3级…等等（单独加载/单视图）

• 此选项会将单个类的数据加载到html可见页面中，并且每30秒 更新一次该特定类 。在上一篇文章中，一个名为的用户 Gaby aka G. Petrioli 提供了一个示例，该示例与我所需要的非常接近，但是该成员从未回来过：http://jsfiddle.net/u7UkS/4/

HTML-

http://pastebin.com/raw.php?i=0PNQGMmn

CSS-

http://pastebin.com/raw.php?i=4H5GHv15

JSON-

http://pastebin.com/raw.php?i=xk860dBN

单一课程页面-http://pastebin.com/raw.php?i=HvpaVhG6

JSFiddle- http://jsfiddle.net/kHtuQ |

http://jsfiddle.net/kHtuQ/show

以前的帖子，某些成员提供了一些ajax示例：Anchor Cycler /
Dropdown，用于定期导入学校课程数据

下面的示例大致显示每个“班级”中的内容 注意班级=学校班级

超级瘦身桌示例：

<table id="gradient-style">
    <tbody>
        <thead>
            <tr>
                <th scope="col"><a id="CLASS1" optionname="CLASS 1"></a>Class</th>
            </tr>
        </thead>
        <tr><td>Class 1</td></tr>
    </tbody>
    <tfoot>
            <tr>
                <th class="alt" colspan="34" scope="col"><a id="KEY"></a><img class="headimager" src="http://placehold.it/250x50"/></th>
            </tr>
            <tr>
                <td colspan="34"><em><b>Data</b> - Test</em></td>
            </tr>
    </tfoot>
</table>

如果有人可以帮助您，将不胜感激，如果您能够发表评论，请这样做，以便我继续学习。

谢谢
丹尼斯S

Answer 1

使用ajax非常简单，
我建议您为此使用HTML数据类型，因为您在容器中有一个表，
这里有一个api文档=>
http://api.jquery.com/jQuery.ajax/
这是我的小提琴为您 量身定做=>
http://jsfiddle.net/sijav/kHtuQ/19/或http://fiddle.jshell.net/sijav/kHtuQ/19/show/

我已经将ajax代码放在名为updateClass（url ）哪个url代表要获取的url，它将在容器中附加要获取的HTML =>

function updateClass(url){
    $.ajax({
        url: url,
        dataType: "HTML",
        error: function(msg){
            alert(msg.statusText);
            return msg;
        },
        success: function(html){
            $("#container").html(html);
        }
    });
}

我添加了一个refreshClass，它刷新了整个容器类，=>

function refreshClass(){
            updateClass("http://fiddle.jshell.net/sijav/mQB5E/5/show/"); //update the class
}

并在更改选择器上更改为以下代码=>

var classUpdateI; //stands for our interval updating class
$(".class-selector").on("change",function(){
    if (classUpdateI!=null)clearInterval(classUpdateI); //If the selector changed clear the interval so the container won't be update on it's own
    if(this.value == "")
        return; // if the value is null don't do anything
    else if(this.value == "allclassnup"){
        refreshClass(); //if the value is allclassnup which is stands for All Non-Updating just refresh the whole class 
    }
    else if(this.value == "allclassup"){
        refreshClass(); //if the value is allclassup which is stands for All Updating refresh the whole class and set an interval for thirty second (look for 30*1000)
        classUpdateI = setInterval(refreshClass,30*1000);
    }
    else //else then it's a simple class value, just simply update the current class
        updateClass(this.value);
})

希望能对您有所帮助；）
编辑 ：编辑后可以获取大表（而不生成表！），所有更新将在30秒的间隔内更新。另一个
编辑 ：信不信由你，我已经解决了您所有的问题！
工作区：http :
//jsfiddle.net/sijav/kHtuQ/39/或http://fiddle.jshell.net/sijav/kHtuQ/39/show/
1，这是因为它仅适用于最后一个html，对于新的，我们应该再做一次！因此将整个$('tr').click()函数放入另一个函数中，并在必要时调用它。
-您想让它充分发挥作用吗？这有点复杂，但是可以在代码中进行一些更改！那我要告诉你，好吧，这里是我们应该把阶级选择更改cookie的当前类的algurithm然后每当我们刷新，我们可以阅读或重新加载页面，并把必要的选定类等等......
但在这里进行代码设计时，我确实使其工作了，
首先我创建了一个全局变量FirstTimeInit = true;，以确保我们是否第一次加载页面，其次我将for循环放在页面加载时突出显示。一个叫做的函数selectSelectedClass，为什么呢？因为我们需要多次调用它，因此第三次添加了一些if语句，以确保我们可以读取cookie，然后更改突出显示的内容和当前类，这是代码：

if(readCookie("CurrentClass")) //if we can read coockie
    $(".class-selector").val(readCookie("CurrentClass")).change(); //change it's value to current cookie and trigger the change function
else{ // else
    selectSelectedClass(); //select those which was highlighted before
    trClick(); //make things clickable
    FirstTimeInit = false; //and turn of the first time init
}

在选择器值更改上添加一个创建cookie更改=> createCookie("CurrentClass",$(".class- selector").val(),1);
，最后更改将Ajax成功获取到此的成功

        success: function(html){
            $("#container").html(html + '<a id="KEY"></a>'); //the html container changer with adding extra id , I'll explain it later it's for your second question
            if(FirstTimeInit){ //if it is First Time then
                selectSelectedClass(); //highlight which was highlighted after put the correct html
                FirstTimeInit = false; // turn of the first time init
            }
            else //else
                for (var i=0;i<($("table").children().length);i++){
                    if(readCookie(i))
                        eraseCookie(i); //erase every cookie that has been before because the table is now changed and we're going on another table so old cookie won't matter
                }
            trClick(); //make things selectable!
        }

为了使它没有错误，我还更改了refreshClass，以便在所选类为all或为null时将firstinit设置为firstinit，因为那样我们就拥有所有类，并且需要那些cookie！所以这是代码：

function refreshClass(){
    if(readCookie("CurrentClass")=="allclassnup"||readCookie("CurrentClass")=="allclassup"||readCookie("CurrentClass")==null)
        FirstTimeInit = true;
    updateClass("http://fiddle.jshell.net/sijav/mQB5E/5/show/");
}

2 <a id="TOP"></a>必须在容器之前，<a id="KEY"></a>必须在将html放在容器上之后在容器的末尾生成。所以$("#container").html(html + '<a id="KEY"></a>');

3下一个和上一个按钮是为非ajax先前设计而设计的，现在需要其他解决方案！例如看这些简单的代码

$("#PreviousClass").click(function(){//on prev click
    $(".class-selector").val($(".class-selector option:selected").prev().val()).change() //change the value to the prev on and trigger the change
});

$("#NextClass").click(function () {//on next click
    $(".class-selector").val($(".class-selector option:selected").next().val()).change() //change the value to the prev on and trigger the change
});

4是可能您应该将密码更改为以下密码，然后再进行=>

currentClass=0;
$("a.TOPJS").click(function () {
    if(currentClass>0){
        currentClass--
        scrollToAnchor('CLASS'+currentClass);
    }
});

$("a.KEYJS").click(function () {
    if($("a[id='CLASS" + currentClass + "']")[0]!=undefined){
        currentClass++
        scrollToAnchor('CLASS'+currentClass);
    }
    else
        scrollToAnchor('CLASSMAX');
});

上帝的运气

另一个请求编辑：（ 希望这将是最后一个！）
工作小提琴 ：http :
//jsfiddle.net/sijav/kHtuQ/42/或http://fiddle.jshell.net/sijav/kHtuQ/42/show/
好吧因为您不喜欢将刷新类更改为其中的更新类，所以我删除了该类，更好的是，我添加了一些代码在cookie中添加类，因为cookie不是树，因此存在某种条件，该类是从类选择器的最后一个字符读取的，因此请确保在最后一个字符处有类号，例如->
Class number ***5***将为类选择器读取数字5！
编辑 ：优化类的下一个和上一个，请参见http://jsfiddle.net/sijav/kHtuQ/46/

编辑 ：根据要求的注释，
这就是我要告诉您的内容，有时该演示在jsfiddle.net上显示，有时在fiddle.jshell.net上显示，这些是不同的域，并且您无法从不同的域获取html。
1）您只能将函数放入Interval或仅创建另一个函数并按如下方式正确调用它=>

classUpdateI = setInterval(function(){updateClass(this.value,parseInt(a.charAt(a.length-1),10));},30*1000);

2）失踪？！我找不到您的第二个问题！
3）好吧，… trclick需要将…更改为=>

function trClick(tIndex){ //tIndex would be classnumber from now on
    if (tIndex == -1){ //if it is all updating or all non updating
        $("tr").click(function(){ //do the previous do
            $(this).toggleClass('selected').siblings().removeClass('selected');
            if(readCookie($(this).parent().index("tbody"))){
                if(readCookie($(this).parent().index("tbody"))==$(this).index())
                    eraseCookie($(this).parent().index("tbody"));
                else{
                    eraseCookie($(this).parent().index("tbody"));
                    createCookie($(this).parent().index("tbody"),$(this).index(),1);
                }
            }
            else
                createCookie($(this).parent().index("tbody"),$(this).index(),1);
        });
    }
    else{ //else
        $("tr").click(function(){ //on click
            $(this).toggleClass('selected').siblings().removeClass('selected');//do the toggle like before
            if(readCookie(tIndex)){ //if you can read the CLASS cookie, not the current index of table because our table has only one row
                if(readCookie(tIndex)==$(this).index()) //as before if we selecting it again
                    eraseCookie(tIndex); //just erase the cookie
                else{ //else
                    eraseCookie(tIndex); //select the new one
                    createCookie(tIndex,$(this).index(),1);
                }
            }
            else
                createCookie(tIndex,$(this).index(),1); //else if we can't read it, just make it!
        });
    }
}

当我们成功调用Ajax时，应使用classNumber => trClick(classNumber);
上次工作的提琴进行 调用 ： http
:
//jsfiddle.net/sijav/kHtuQ/53/或http://fiddle.jshell.net/sijav/kHtuQ/53
/表演/

祝好运