Как сделать несколько вызовов ajax при нажатии на элемент <li> - PullRequest
Новая
       6

Как сделать несколько вызовов ajax при нажатии на элемент <li>

0 голосов
/ 28 января 2019

Я новичок в ajax и его асинхронной природе, поэтому у меня возникло несколько проблем, с которыми этот сайт помог мне решить, но я не могу в этом разобраться.

Имеяlist: я пытаюсь получить текст элемента, нажимая на него, и использовать его в вызываемом вызове 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>

Что происходит:

1-й щелчок по «Mobile»: печать res [array [Mobile]] действительно имеет результат.2-е нажатие на «TV»: печать res [array [TV]] действительно имеет результат, но предыдущий исчез.

Кто-нибудь знает, в чем может быть проблема?Я попытался обернуть функцию ajaxCall () в анонимную функцию, как сказано здесь , но не повезло.

Также: в идеале, пользователь должен щелкнуть ссылку, дождаться вызова ajaxчтобы закончить и показать некоторую информацию на экране, а затем разрешено нажать на другую ссылку.Не уверен, если это произойдет, я должен установить async: false, но в любом случае это не сработает, так как у меня та же проблема с сохранением результатов.

Большое спасибо.

1 Ответ

0 голосов
/ 28 января 2019

Рассмотрим следующий код. 

<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().

Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...