0

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

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

我正在使用 jQuery 插件“转换”。

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 社区提出的第一个问题，您好，感谢多年来我从该资源中获得的所有匿名使用。

4

2 回答 2

0

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 答案：如何将 javascript 函数存储在队列中...

于 2011-08-22T13:44:07.577 回答
0

可能因为你根本没有增加变量 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" }
                    });

希望这是有道理的..

于 2011-08-21T21:06:45.970 回答