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

所以@SOF，

我一直试图让我的学校成绩、结果、预计成绩等网页具有自动更新功能，以便在通过使用 jquery 获得新数据时刷新页面上的数据。和 ajax以及类(class)的“单一 View ”。

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

我的网页左上 Angular 有一个导航助手，它是一个下拉菜单，通过“搜索”找到的列表填充 <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 类...等(单独加载/单 View )

此选项会将单个类的数据加载到 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 to import school class data periodically

下面是一个示例，大致显示每个“类”中的内容 Note Class = School Class

超薄 table 示例:

<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>

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

谢谢
丹尼斯

最佳答案

使用ajax非常简单，
我建议您为此使用 HTML 数据类型，因为您的容器中有一个表，
这里有一个 api 文档 => http://api.jquery.com/jQuery.ajax/
这是我为你制作的 fiddle => 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 秒的间隔内更新

另一个编辑 : 信不信由你，你的问题我都做了!
工作 fiddle :http://jsfiddle.net/sijav/kHtuQ/39/或 http://fiddle.jshell.net/sijav/kHtuQ/39/show/
1 那是因为只做了最后一个html，对于新的我们应该再做一次!所以把整个$('tr').click()函数转换为另一个函数并在必要时调用它。
- 你想让它完全工作吗？它有点复杂，但它可以在代码中进行一些更改!我要告诉你，好吧，这是我们应该将当前类放在类选择器上的算法更改为cookie，然后我们可以在刷新或重新加载页面时读取它并放置必要的选定类等等......
但在这里的代码设计中，我做到了让它工作，
首先我创建了一个名为 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
}

Forth 在选择器值更改时添加创建 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 更改为在选定的类全部为空或为空时转为 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');
});

天佑

另一个请求编辑: (希望这是最后一次!)
工作 fiddle :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); 调用它
最后工作 fiddle : http://jsfiddle.net/sijav/kHtuQ/53/或 http://fiddle.jshell.net/sijav/kHtuQ/53/show/

祝你好运

关于javascript - 通过使用 json 或 html 文件使用 jQuery ajax 自动刷新/更新表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20136649/

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

上一篇：c# - 具有多态对象数组的 JSON 反序列化

下一篇：javascript - 如何对事件对象进行字符串化？