Question

的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>');
         }
       }
      });
    });
  });

所以我想要做的就是每当我按下＆＃34; GET Order by Name＆＃34;按钮，我想返回并显示其中包含名称的所有结果。现在，它只是通过我的JSON数组并打印出最新的结果。知道如何解决我的问题吗？提前谢谢。

Answer 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

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

1 个答案: