单击 <li> 元素时如何进行多个 ajax 调用答案

【问题标题】：How to make several ajax calls when clicking on a <li> element单击 <li> 元素时如何进行多个 ajax 调用
【发布时间】：2019-01-27 23:54:21
【问题描述】：

我是 ajax 及其异步特性的新手，所以我遇到了几个问题，这个网站帮助我解决了这个问题，但我真的无法解决这个问题。

有一个列表：我想要做的是在点击它时获取元素的文本，并在触发的 ajax 调用中使用它。

ajax 调用的结果应该存储在一个全局变量数组（var results）中。问题是，即使每个 ajax 调用确实将结果存储在数组的特定位置，但当我打印结果时，似乎只保存了最后一个值。

我有这样的事情：

<head>
    <script type="text/javascript">
        var webServiceURL;
        var soapMessage;

        var results = []; // array where each ajax call result will be stored

        var array= {"Mobile": 0,"TV": 1,"AirCon": 2,"Photo":3,"AudioSys": 4};  
           // depending on which element of the list I click, returns the position of the array where it has to store the result of the ajax call. 
           //For instance: when clicking on "Mobile", the ajax call should store the result in the index 0 of results, which we get by doing: array[Mobile]

        function ajaxCall(electronic_type){  
            webServiceURL = 'http://.....';  
            soapMessage = '<?xml version="1.0"....' + electronic_type + '.</S:Envelope>'; 

             var promise= $.ajax({
                    url: webServiceURL,
                    type: "POST",
                    dataType: "xml",
                    data: soapMessage,
                    processData: true,
                    contentType: "text/xml; charset=\"utf-8\"",
                    success: storeResult,
                    error: OnError
                });  
                promises.push(promise);
             function storeResult(text) {   
                      results[array[electronic_type]]=response_from_server;
             }
             $.when.apply(null, promises).done(function(){

                 // print results array to check if everything is stored.
                // do other stuff when all clicks have been processed
            });
        }
       $(document).ready(function () 
            if( request.getParameter("value") !== null){
                 String electronicType = request.getParameter("value");
                ajaxCall(electronicType);                   
            }                             
        });
    </script>    
</head>

</body>
    <ul>
        <li><a href="electronics.jsp?value=Mobile">Mobile Phones</a></li>
        <li><a href="electronics.jsp?value=TV">Television</a></li>
        <li><a href="electronics.jsp?value=AirCon">Air Conditioners</a></li>
        <li><a href="electronics.jsp?value=Photo">Photo & Optics</a></li>
        <li><a href="electronics.jsp?value=AudioSys">Audio Systems</a></li>
    </ul>
</body>

会发生什么：

第一次单击“Mobile”：res[array[Mobile]] 的打印确实有结果。 2nd clic on "TV": res[array[TV]] 的 print 确实有结果，但是前一个已经消失了。

有人知道可能是什么问题吗？我尝试将 ajaxCall() 函数包装在一个匿名函数中，例如 here，但没有运气。

另外：理想情况下，用户应该点击一个链接，等待 ajax 调用完成并在屏幕上显示一些信息，然后允许点击另一个链接。不确定是否要发生这种情况我应该设置 async: false，但无论哪种方式它都不起作用，因为我在存储结果时遇到了同样的问题。

非常感谢。

【问题讨论】：

欢迎来到 Stack Overflow。看起来您正在尝试在 <head> 中定义 results 而不是在 <script> 块中。此外，我建议将.push() 与您的result 数组一起使用。 results[array[electronic_type]]=response_from_server; 超出范围且语法不正确。
@Twisty 感谢您的欢迎。我在这里粘贴代码时出错了，所有变量确实在<script> 中声明，我现在将对其进行编辑。就我而言，当用户单击链接时，我需要触发 ajax，并且每个 ajax 调用将根据单击的链接返回不同的结果。例如，我想查看“Mobile”或“TV”的价格，我触发 ajaxCall("Mobile") 并将结果存储在 results[array[Mobile]]) 中，因为我已经分配了索引 0 (代码中的数组[Mobile]）。按照您的建议使用 .push() 方法，如何检索特定值？
结果是一个数组还是数组？ results[0][0] 或对象数组：results[0].mobile ?
var array 表示我将用于将每个结果存储在var results 中的索引。例如：对于“Mobile”，我想将它存储在results[0]，所以我通过array[Mobile]获取索引。我检查了存储在承诺部分的结果，它可以工作，但是当我点击几下时，results 只有我存储的最后一个结果。

标签： javascript jquery ajax web-services jsp

【解决方案1】：

考虑下面的代码。

<head>
<script type="text/javascript">
var results;
function ajaxCall(webServiceURL, soapMessage){  
  $.ajax({
    url: webServiceURL,
    type: "POST",
    dataType: "xml",
    data: JSON.stringify(soapMessage),
    processData: true,
    contentType: "text/xml; charset=\"utf-8\"",
    success: function(data){
      results.push(data);
    },
    error: function(chr, status, error){
      console.log("AJAX Error: " + status + ", " + error);
    }
  });
}
$(function (){
  if(request.getParameter("value") !== null){
    var electronicType = request.getParameter("value");
    ajaxCall("electronics.jsp", {value: electronicType});                   
  }                             
});
</script>    
</head>
</body>
<ul>
  <li><a href="electronics.jsp?value=Mobile">Mobile Phones</a></li>
  <li><a href="electronics.jsp?value=TV">Television</a></li>
  <li><a href="electronics.jsp?value=AirCon">Air Conditioners</a></li>
  <li><a href="electronics.jsp?value=Photo">Photo & Optics</a></li>
  <li><a href="electronics.jsp?value=AudioSys">Audio Systems</a></li>
</ul>
</body>

现在这只是一个例子。不确定您打算如何处理这些承诺，也许还有其他相关的事情。根据它的编写方式，您是否计划在用户单击链接时触发 Ajax？如果是这种情况，您将需要执行以下操作：

$(function (){ 
  $("li a").click(function(e){
    e.preventDefault();
    var parts = $(this).attr("href").split("?");
    var url = parts[0];
    var query = parts[1].split("=");
    ajaxCall(url, {query[0]: query[1]});                   
  }                             
});

这使用<a> 属性并在ajaxCall() 中使用它们。

希望这会有所帮助。

【讨论】：

是的，我打算在用户单击链接时触发 Ajax。我添加了webServiceURL 和soapMessage 的值以进行澄清。链接的文本（例如，“Mobile”）是我唯一需要的部分，因为它是 soapMessage 的一部分，这就是我将其发送到 ajaxCall("Mobile") 的原因。所以我不得不调用像这样的函数ajaxCall(query[1]);，对吧？承诺部分是因为我需要等到我得到用户所有点击的结果，这样我才能处理所有这些。
@JackM.yes，如果你只想发送"mobile"，那就是query[1]。
如果这有助于或回答了您的帖子，请点赞并将其标记为答案。
试过了，效果很好，非常感谢！