jQuery AJAX-возврат и отображение нескольких результатов

индекс.формат html

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="scripts.js"></script>
  </head>
  <body>
  <h1>Order Request Form</h1>
  <form id="create-form">
    <table>
      <tr>
        <td>ID</td>
        <td><input type="text" id="txtID"></td>
        <td><button id="getid-button">GET Order by ID</button></td>
      </tr>
      <tr>
        <td>Name</td>
        <td><input type="text" id="txtName"></td>
        <td><button id="getname-button">GET Order by Name</button></td>
      </tr>
    </table>
  </form>
  <div id="resultDiv"></div>
  </body>
</html>

файлы сценариев.js

$(document).ready(function() {
  var resultElement = $('resultDiv');
  $('#getname-button').on('click',function(e) {
    var searchName = $('#txtName').val();
    e.preventDefault();
    $.ajax ({
      url: 'https://localhost:8080',
      contentType: 'application/json',
    }).then(function(response) {
       for (var i = 0; i < response.length, i++) {
         if (response[i].names.indexOf(searchName) > -1) {
           resultElement.html('ID: ' + response[i].id + '</br>
                             + 'Name: ' + response[i].name + '</br>');
         }
       }
      });
    });
  });

Поэтому я хочу, чтобы всякий раз, когда я нажимаю кнопку «получить заказ по имени», я хочу вернуться и отобразить все результаты с именем в нем. Прямо сейчас, однако, он просто проходит через мой массив JSON и распечатывает последний найденный результат. Есть идеи, как я могу решить свою проблему? Спасибо заранее.

1 ответ

  1. Вы используете .html()ведьма будет переопределить все предыдущие результаты использования .append()вместо этого.

    var resultElement = $('#resultDiv'); //use # for ids
    
    resultElement.append('ID: ' + response[i].id + '</br>
                             + 'Name: ' + response[i].name + '</br>')
    //use append or else you will only see 1 result