如何使用事件处理程序创建 5 JQuery AJAX 调用？

Question

我正在为我的 school/workplace 开发一个注册系统，教师需要一份完整的学生名单，这些学生分为 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 absence</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()
                });
            });
        });
    });
});

该函数会将有问题的 div 保存在 eventObject.data 数组中，并使用该 div 的 ID 作为 PHP 页面上的搜索条件。通过将 div 保存为 eventObject 中的一个值，我将能够在我想到的其他地方使用相同的名称，因为如下所示，这个想法适用于我使用事件处理程序的搜索功能。

每个 table 都使用功能性事件处理代码获得了自己的搜索机会，但尚未完全用于此目的：

$(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 编码器，也许我正在偏离最佳实践或遗漏一些非常明显的东西。不管怎样，我真的希望你能帮助我！

Answer 1

我设法找出了问题出在哪里，我想我会 post 在这里。

所以，出于某种原因，当你在 JQuery 中调用一个函数并在其中保存一个变量时，下次你调用相同的函数并在变量中保存一个新值时，新变量是保存在旧函数调用中。

现在我把元素e保存在div

div = e;

当我调用它5次时：

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

那么，当AJAXreturns时，它看到的是：

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);
    });
}

此函数采用电子元素，link 你 AJAX 到的目标，你希望你的结果进入的目标以及你希望作为 POST 发送的任何数据数据

可以这样调用：

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

如何使用事件处理程序创建 5 JQuery AJAX 调用？

How do I create 5 JQuery AJAX calls using eventhandlers?

javascript

ajax

jquery

event-handling

dom-events