Question

我正在使用来自以下网址的节点js服务器：http://localhost:5000/listproducts 我有以下数据：

[{“ Id”：1，“名称”：“新产品”，“描述”：“ P1 desc”，“数量”：1}，{“ Id”：2，“名称”：“ Product2” ，“说明”：“ p2 desc”，“数量”：7}]

我想使用ajax在html页面中显示数据。

我已经在html页面中尝试过此操作：

$('#display').click(function() {
      $.ajax({
          type: 'GET',
          url: 'http://localhost:5000/listproducts',
          dataType:"json", //to parse string into JSON object,
          success: function(data){ 
              if(data){
                  var len = data.length;
                  var txt = "";
                  if(len > 0){
                      for(var i=0;i<len;i++){
                          if(data[i].Name && data[i].Description){
                              txt += "<tr><td>"+data[i].Name+"</td><td>"+data[i].Description+"</td><td>"+data[i].Quantity+"</td></tr>";
                          }
                      }
                      if(txt != ""){
                          $("#table").append(txt).removeClass("hidden");
                      }
                  }
              }
          },
          error: function(jqXHR, textStatus, errorThrown){
              alert('error: ' + textStatus + ': ' + errorThrown);
          }
      });
      return false;
    });

但是当我尝试它时，什么也没有发生，并且html控制台页面没有显示任何错误：

html：

<button id="display">Display Products</button>
    <table id="table" class="hidden" style="display:none;">
        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Description</th>
            <th>Image</th> 
        </tr>
    </table>

我希望输出为包含产品数据的表

Answer 1

您可以尝试这样：

Javascript：

$('#display').click(function() {
      $.ajax({
          type: 'GET',
          url: 'http://localhost:5000/listproducts',
          dataType:"json", //to parse string into JSON object,
          success: function(data) { 
              if(data) {
                for(let i=0;i<data.length;i++) {
                    $('#table tbody').append("<tr><td>"+data[i].Name+"</td><td>"+data[i].Description+"</td><td>"+data[i].Quantity+"</td></tr>");
                }
            }
          },
          error: function(jqXHR, textStatus, errorThrown){
              alert('error: ' + textStatus + ': ' + errorThrown);
          }
      });

      return false;
});

HTML：

<button id="display">Display Products</button>
<table id="table" class="hidden" style="display:none;">
    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Description</th>
            <th>Image</th> 
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

如何使用ajax（获取方法）在html页面（客户端）中显示来自node.js服务器的json数据？

1 个答案: