javascript – 如何使用eventhandler创建5个JQuery AJAX调用？

我正在为我的学校/工作场所开发一个注册系统,教师需要一份完整的学生列表,这些学生分为5个单独的类别：

>没有见过并且没有注册过
>早上8点以后没有见过但注册了脓肿
>早上8点之前没有见过但注册了脓肿
>早上8点以后已经满足但注册了脓肿的原因
>早上8点之前见过并注册

由于第一个(未满足且未注册)将在3个数据库中加载学生数据以进行检查,因此获取数据可能需要一些时间.我想通过PHP加载所有数据,向用户显示白屏直到加载所有内容,而是加载页面,然后使用JQuery AJAX函数获取数据.

AJAX加载和显示使用此代码工作：

//Not met and not registered
div1 = $("#not-met-not-registered");
    div1.find(".text").html("<img src='' class='loader'>");
    $.post("/admin_post/getusers", {area:"not-met-not-registered"}, function(data) {
        div1.find(".text").html(data);

        div1.find("tr").each(function (row) {
            datatable1.push({
                "Row": $(this),
                "Navn": $(this).find("td.navn").html()
            });
        });
    });

但是,这仅在我静态输入div值时起作用,并将div值保存为5个不同的名称(div1,div2等).

要收到数据,我有5个div看起来像这样：

<div id="not-met-not-registered" class="list">
    <label>Students who have not met and not registered abscence</label>
    <img src="/images/search.png" class="search">
    <input type="text" class="search">
    <div class="text"></div>
    <input type="button" value="Print">
</div>

每个div都有一个唯一的ID,AJAX应该通过POST发送以获取可靠的数据.这就是为什么我认为这样做的原因是可以解释的：

$("div.lists div.list").each(function() {
    $(this).on("ready", {div: this}, function (eventObject) {
        div = eventObject.data.div;
        $.post("/admin_post/getusers", {area: $(div).attr("id")}, function (data) {
            div.find("div.text").html(data);

            div.find("tr").each(function (row) {
                datatable.push({
                    "Row": $(this),
                    "Name": $(this).find("td.name").html()
                });
            });
        });
    });
});

该函数将在eventObject.data数组中保存有问题的div,并使用该div的id作为PHP 页面上的搜索条件.通过将div保存为eventObject中的值,我可以使用与我想到的其他位置相同的名称,因为,如下所示,该想法适用于使用eventhandler的搜索功能.

每个表都使用功能事件处理代码给出了自己的搜索机会,尽管还没有为完整目的而构建：

$(this).find("input[type=text].search").on("change", {preVal: ""}, function (eventObject) {
    preVal = eventObject.data.preVal;
    curVal = $(this).val();

    if (preVal != curVal) {
        eventObject.data.preVal = curVal;
        alert(curVal);
    }
});

我知道我不是一个非常熟练的JS或JQuery编码器,也许我将走出最佳实践或遗漏一些非常明显的东西.我真的希望你能帮帮我吧！

解决方法:

我设法找出了故障是什么,并且我想在这里发布它.

因此,出于某种原因,当您在JQuery中调用函数并在其中保存变量时,下次调用相同的函数并在变量中保存新值时,新变量将保存在旧函数调用中.

现在我将元素e保存在div中

div = e;

我打电话5次时：

div = 1
div = 2
div = 3
div = 4
div = 5

然后,当AJAX返回时,它看到的是：

div = 5
div = 5
...

通过删除它的div部分,我使它工作：

function load_in(e, link, target, data)
{
    $.post(link, {data:data}, function(data) {
        $(e).find(target).html(data);
        enable(e);
        setCount(e);
    });
}

此函数接收电子文档,AJAX链接,您希望结果进入的目标以及您希望作为POST数据发送的任何数据

可以用这个来调用：

load_in(this, "/admin_post/getusers", "div.list", $(this).attr("id"));

javascript – 如何使用eventhandler创建5个JQuery AJAX调用？

相关推荐