jQuery - связывает возврат AJAX с определенным DIV
Я пытаюсь сделать рабочий список с возможностью поставить в очередь несколько запросов. Я могу сделать один запрос, и возврат будет добавлен в правильный 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>
Я уверен, что, работая не по назначению, я не использовал лучшие практики при создании этой функции. Если вы видите области, где код может быть лучше написан, пожалуйста, не стесняйтесь критиковать.
Это мой первый вопрос к сообществу stackru, так что привет, и спасибо за все то, что я использую в течение многих лет.
2 ответа
Zzzz, спасибо за ваш вклад. Это подтолкнуло меня в правильном направлении. Я переоценил, как я извлекал данные XML. Оказывается, я выполнял вызов AJAX для функции.transform, когда он сам выполняет вызов AJAX. Вызвав его в отдельной функции и не имея возможности передать уникальный идентификатор вызова между двумя методами ajax, я потерял ссылку. Используя только метод 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-вызов линейным.
Если мне это удастся, я могу ответить с помощью функции закодированной очереди, но здесь я не знаю этикета, поскольку это будет немного не по теме...
Я ссылаюсь на ответ stackru: Как хранить функции JavaScript в очереди...
Вероятно, потому что вы вообще не увеличиваете переменную evtIncrmtl, предполагая, что когда вы говорите, что запрос потерпел неудачу, он приходит к функции успеха.
Кстати, здесь есть жесткая зависимость, что ваши ответы всегда будут следовать определенному порядку, который является неправильным.. может быть случай, когда вы отправляете 1,2,3 запроса, а порядок ответов будет 2,3 и 1 даже хотя 1 и 2 являются неудачными запросами.. таким образом, этот подход является своего рода неправильным..
правильная оценка - отправка идентификатора div (или div no) на ваш сервер, и вы отправляете обратно тот же идентификатор, что и часть вашего ответа. Поскольку ваш тип данных - текст, вы можете просто добиться этого, изменив его на "json" (ищите abt json от google для вашего языка сценариев на стороне сервера), и ваш ответ должен быть следующим:
{
"divId": "2staticEntry", //"divCount" :2 //divid or its equivalent
xmlReturn: "<your old txt>"
}
теперь разбираем этот json.. читаем abt парсинг json в 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" }
});
надеюсь, что это имеет смысл..