Question

我正在尝试制作一个能够排队多个请求的运行列表。我能够提出单一请求并将返回附加到正确的DIV。但是当我发出两个或更多请求时，在返回第一个请求之前，第一个GET被Web服务器丢弃（项目约束...），第二个返回被插入到第一个请求的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社区的第一个问题，所以你好，感谢多年来我从这个资源中获得的所有匿名用法。

Answer 1

可能因为你没有增加变量evtIncrmtl，假设当你说请求失败时，它会进入成功函数。

顺便说一下，这里有一个不同的硬依赖关系，你的回复总是会遵循一个不正确的特定订单..可能有一种情况，你发送1,2,3请求，响应顺序将是2,3和1即使1和2是失败的请求..因此这种方法有点不正确..

正确的appraoch将div（或div否）的id发送到您的服务器，并且您作为响应的一部分发送回相同的id ..因为您的数据类型是文本，您可以通过以下方式实现此目的：将其更改为“json”（从谷歌研究abt json作为服务器端脚本语言），您的回复应如下所示：

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

现在解析这个json ..在js中读取abt解析json。最简单的方法是使用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" }
                    });

希望有道理..

Answer 2

Zzzz，谢谢你的意见。它推动我朝着正确的方向前进。我重新评估了我是如何获取XML数据的。事实证明，当它执行AJAX调用时，我正在为.transform func进行AJAX调用。通过在单独的func中调用它，并且无法在两个ajax方法之间传递调用的唯一id，我丢失了引用。仅使用transform方法，当页面从Web服务器返回时，我可以保持赋值完整性。

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

//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线性调用。

如果我让它工作，我可以使用编码队列func回复，但我不知道这里的礼节，因为它会稍微偏离主题......

我正在引用stackoverflow回答：How do I store javascript functions in a queue...

jQuery - 将AJAX返回给特定的DIV

2 个答案: