jQuery - 关联 AJAX 返回特定 DIV答案

【问题标题】：jQuery - Associate AJAX return's to specific DIV'sjQuery - 关联 AJAX 返回特定 DIV
【发布时间】：2011-10-31 16:03:10
【问题描述】：

我正在尝试创建一个能够将多个请求排队的运行列表。我能够发出单个请求并将返回附加到正确的 DIV。但是当我发出两个或多个请求时，在返回第一个请求之前，第一个 GET 被网络服务器丢弃（项目约束......），第二个返回被插入到第一个请求的 DIV 中。

编辑：我想确保将相关请求附加到正确的 DIV 中。如果 GET 请求被网络服务器终止，那么我将在 error:{textStatus} 设置上添加一个函数，并将股票文本附加到 div 中，提醒用户注意错误。

我正在使用 jQuery 插件“Transform”。

JS：

<script type="text/javascript">
    $(function() {
        var evtIncrmt = 0
        $("#searchForm").submit(function (event) { 
            event.preventDefault();
            evtIncrmt = evtIncrmt + 1

            var $form = $(this),
                //term = $form.find('input[name="cmdtextbox"]').val(),
                url = $form.attr('action');
                cmdInput = "<M ID=\"Input_MSGID\"><R ID=\"AscString_RECID\">OPD</R></M>"

            $( "#listContainer" ).prepend( $(document.createElement( "div" ))
                .attr({ id: evtIncrmt + "entry",  title: "photo by a cohen" })
                .text( "This is Event Number " + evtIncrmt )
            );
            $( "#" + evtIncrmt + "entry" ).append( $(document.createElement( "div" ))
                .attr({ id: evtIncrmt + "entryXmlReturn",  title: "review by w mitchell" })
                .text(  "Waiting for response. . " )
            );
            console.log("event increment before ajax call" + evtIncrmt);
            $.ajax({
                type: "GET",
                timeout: 120000,  /* 2mins */
                context: "#" + evtIncrmt + "entryXmlReturn",
                url: url,
                data: { 
                    XMLString: cmdInput ,
                    uqid: evtIncrmt
                },
                dataType: "text",
                success: function (xmlReturn) {
                    console.log("event increment inside transform" + evtIncrmt);
                    $( "#" + evtIncrmt + "entryXmlReturn" ).transform({
                        xmlstr: xmlReturn,
                        xsl: { url: "xsl/StaticStyle.xsl" }
                    });
                }
            });
        });
    });
</script>

html:

<html>
    <body>
        <div class="links">
            <form action="/" id="searchForm">
                <input type="input" name="cmdtextbox" value="OPD" />
                <input type="submit" value="Search" />
            </form>
        </div>
        <div id="loadHTMLajax"></div>
        <div id="listContainer">
            <div id="2staticEntry">This is entry two.</div>
            <div id="1staticEntry">Hello oldest entry number ONE</div>
        </div>
    </body>
</html>

除了没有按预期工作外，我确信我在制作此功能时没有使用最佳实践。如果您发现可以更好地编写代码的地方，请随时批评。

这是我向 stackoverflow 社区提出的第一个问题，您好，感谢多年来我从该资源中获得的所有匿名使用。

【问题讨论】：

对字符串使用单引号 -> 无需转义 " 例如 var a= 'this is "fine"';
好的，好的提示。我试图根据各种猪圈的例子和侥幸的双引号来找到正确的礼仪。我打算搜索最被接受的 js 实践。
当你的意思是不工作时发生了什么？还有这里指的url是什么..
当我发出两个快速请求并创建两个 DIV 来接收请求时，两个请求中的第一个失败（按预期工作），当第二个请求返回时，它被附加到错误的 DIV （第一个请求被杀死的 DIV）。
变量“url”引用表单操作属性。 url 带有转换函数的设置是指两个文件之一（xml 或 xsl）的位置。

标签： jquery jquery-xml

【解决方案1】：

Zzzz，感谢您的意见。它把我推向了正确的方向。我重新评估了获取 XML 数据的方式。事实证明，当它自己执行 AJAX 调用时，我正在为 .transform 函数进行 AJAX 调用。通过在单独的函数中调用它，并且无法在两个 ajax 方法之间传递调用的唯一 ID，我失去了引用。仅使用 transform 方法，当页面从网络服务器收到返回时，我可以保持分配的完整性。

以下是更正后的代码；总结如下代码：

//code above unchanged
console.log("event increment before ajax call" + evtIncrmt);

$("#" + evtIncrmt + "entryXmlReturn").transform({
    //async:false,
    success: function () {
        alert("Transform succeeded");
    },
    xml: {
        url: "/",
        data: { 
            XMLString: cmdInput ,
            uqid: evtIncrmt
        },
        //timeout: 120000  /* 2mins */
        success: function () {
            console.log("xml " + evtIncrmt + ' succeeded');
        }
    },
    xsl: {
        url: "xsl/StaticStyle.xsl",
        success: function () {
            console.log("xsl " + evtIncrmt + ' succeeded');
        }
    }
});

我仍然有多次调用网络服务器的问题。但是我决定使用一个队列，因为我一次只能发出一个请求，并且线性地进行每个 AJAX 调用。

如果我得到它的工作，我可以用编码队列函数回复，但我不知道这里的礼仪，因为它会稍微偏离主题......

我引用的是 stackoverflow 答案：How do I store javascript functions in a queue...

【讨论】：

【解决方案2】：

可能因为你根本没有增加变量 evtIncrmtl 假设当你说请求失败时它涉及到成功函数..

顺便说一句，这里有一个不同的硬依赖关系，您的响应将始终遵循不正确的特定顺序.. 可能存在您发送 1,2,3 请求而响应顺序为 2,3 的情况和 1 即使 1 和 2 是失败的请求.. 因此这种方法有点不正确..

正确的方法是将 div 的 id（或 div no）发送到您的服务器，然后您将相同的 id 作为响应的一部分发回。由于您的数据类型是文本，您可以通过以下方式简单地实现这一点将其更改为“json”（从 google 研究 abt json 以获得您的服务器端脚本语言），您的响应应如下所示：

{
"divId": "2staticEntry",  //"divCount" :2 //divid or its equivalent
xmlReturn: "<your old txt>"
}

现在解析这个 json.. 阅读 abt parsing json in js。最简单的方法是使用 eval() 但我不推荐它..

一旦你解析它，你就可以使用它返回的对象，如下所示：

var obj= eval(respnse);  //or equivalent 
obj.divId   //represents your div to be updated
$( "#" + evtIncrmt + "entryXmlReturn" ).transform({
                        xmlstr: obj.xmlReturn,
                        xsl: { url: "xsl/StaticStyle.xsl" }
                    });

希望这是有道理的..

【讨论】：

不幸的是，由于项目限制，我无法从网络服务器请求 json 或对网络服务器进行任何更改。（这很令人沮丧）你是对的，我的响应返回的顺序可能是乱序的，所以这种将响应分配给正确 DIV 的能力非常重要。但是，我可以看到增量正常工作。在控制台日志中，编号 DIV 的创建，以及我在 GET 提交中传递的唯一参数。有没有办法让每个 ajax“线程”与其目标 DIV 正确关联？
我一直在想...读取 ajax 返回的 url 将确定它要返回的 div，因为我将该请求的递增 id 作为字符串参数附加。我的成功函数中有没有办法引用它正在解析的 URL？
完成所有工作后，我偶然发现了这个插件...docs.jquery.com/AjaxQueue