jQuery AJAX - 返回并显示多个结果答案

【问题标题】：jQuery AJAX - Returning and displaying multiple resultsjQuery AJAX - 返回并显示多个结果
【发布时间】：2016-11-02 13:06:21
【问题描述】：

index.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>

scripts.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 数组并打印出找到的最新结果。知道如何解决我的问题吗？提前致谢。

【问题讨论】：

使用.append() 而不是.html()
^^^ + $('#resultDiv')
searchName 定义在哪里？
您需要使用.append() 来避免覆盖新的html，我认为您的意思是response[i].name 而不是response[i].names
谢谢你们。 append 是我正在寻找的。 @mplungjan我忘了把它添加到sn-p中。已编辑

标签： javascript jquery ajax spring rest

【解决方案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

【讨论】：

谢谢，这正是我想要的！