Question

我可以从API调用获取URL响应。我需要显示那些已经从带有HTML表的excel文件中读取的响应。 index.html如下：

<html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title></title>
      <link href="css/bootstrap.min.css" rel="stylesheet">
      <link href="css/main.css" rel="stylesheet">
      <link rel="stylesheet" 
            href="https://cdnjs.cloudflare.com/ajax/libs/
                  font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <body>
      <nav class="navbar navbar-header navbar-brand" role="navigation">
        <div class="container">
          <a class="navbar-logo"><img alt="Brand" src="images/logo.jpg" height=5 0px></a>
          <a class="navbar-brand" href="index.html" style="color: white; font-size: 12">
            ABC 
          </a>
          <div class="navbar-header navbar-right">
            <ul class="nav nav-tabs">
              <li role="presentation" class="active"><a href="index.html">Table1</a></li>
              <li role="presentation">
                <a href="table2.html" style="color: white">Table2</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>

      <!-- table for important telephone extensions -->
      <table id="AjaxGetTable1ID" 
             class="table-responsive container table table-hover 
                    table-bordered table-allignment"
             style="width:35%; padding-bottom:10px; margin-right: 15.5%">
        <tbody>
          <tr style="width:03%">
            <th style="width:60%">Employee</th>
            <th style="width:22%">Extension Code</th>
          </tr>
        </tbody>
      </table>
      <div class="wrap">
        <form id="someform">
          <input type="text" id='getNameOfEmployeeID' class="searchTerm" 
                 placeholder="Employee Name" name="employeeNamePassToURL">
          <button type="submit" onclick='displayEmployee()' class="searchButton" 
                  id="submitid">
            <i class="fa fa-search"></i>
          </button>
        </form>
      </div>
      <p id="demo"> </p>
      <p id="demo2"> </p>
      <p id="myID"> </p>
      <p id="displayResult" 
             style="width:35%; padding-bottom:10px; margin-left: 17%; margin-top: 5%"></p>
      <script src="js/jquery-3.2.1.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
      <script src="js/main.js"></script>
      <!-- <script src = "js/table1.js"></script> -->
    </body>
    </html>

我的能够获得URL响应的javascript文件如下：

try {
       AjaxGetTable1 = function(url, storageLocationTable1, mySuccessCallback) {
         var result = $.ajax({
           type: "GET",
           url: 'http://localhost:8080/importantExtensions',
           param: '{}',
           contentType: "application/json",
           dataType: "json",
           success: function(tableData) {
             storageLocation = ['data'];
             var length = Object.keys(storageLocation).length;
             $.each(storageLocation, function(index, value) {
               var display = value.empName + value.extCode;
               $("#someform #someLabel" + index).val(value.empName);
             });
           }
         }).responseText;
         return storageLocationTable1;
       }
     } catch (e) {
       document.getElementById("AjaxGetTable1").innerHTML = e.message;
     }

请建议我一种方法，如何将url响应附加到html表中。

Answer 1

尝试这种方式

＆＃13;

   function getDetails(){
    $.ajax({
        url:'https://jsonplaceholder.typicode.com/users',
        method:'GET',
        contentType: "application/json",    
        dataType:'json',
        success:function(response){
        var trHTML='';
        
            for(var i=0;i<response.length;i++){
           trHTML=trHTML+'<tr><td>'+response[i].name+'</td><td>'+response[i].email+'</td></tr>'; 
           }
          $('#tBody').append(trHTML);
        },
        error:function(response){

        }
      });
   }

＆＃13;

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css"/>

        <button class="btn btn-primary" onclick="getDetails();">Get Employee </button>
        <table class="table">
        <thead>
        <tr><th>Emplyoee Name</th><th>Email</th></tr>
        </thead>
        <tbody id="tBody"></tbody>
        </table>

＆＃13;

Answer 2

问题在于索引号。实际上，首先，你需要用一些数字创建类，然后只需要使用

$（＆＃34; #someform＃someLabel＆＃34; + index）.val（value.empName）;

try {
   AjaxGetTable1 = function(url, storageLocationTable1, 
 mySuccessCallback) {
var result = $.ajax({
  type: "GET",
  url: 'http://localhost:8080/importantExtensions',
  param: '{}',
  contentType: "application/json",
  dataType: "json",
  success: function(tableData) {
    storageLocation = ['data'];
    var length = Object.keys(storageLocation).length;
    $.each(storageLocation, function(index, value) {
      var a = '<tr><td>'+value.empName + '<td><td>'+value.extCode+'</td></tr>'


      $("#htmlbody").appendChild(a)

      var display = value.empName + value.extCode;
      $("#someform #someLabel" + index).val(value.empName);
    });
  }
 }).responseText;
   return storageLocationTable1;
  }
} catch (e) {
  document.getElementById("AjaxGetTable1").innerHTML = e.message;
}

试试这个，如果你遇到任何问题，请告诉我。我不确定它是否有效。

这是我的代码，如果你想要你可以用任何元素替换并给出一些属性，我在循环中创建div。

<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title></title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/main.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body>
  <nav class="navbar navbar-header navbar-brand" role="navigation">
    <div class="container">
      <a class="navbar-logo"><img alt="Brand" src="images/logo.jpg" height=5 0px></a>
      <a class="navbar-brand" href="index.html" style="color: white; font-size: 12">ABC </a>
      <div class="navbar-header navbar-right">
        <ul class="nav nav-tabs">
          <li role="presentation" class="active"><a href="index.html">Table1</a></li>
          <li role="presentation"><a href="table2.html" style="color: white">Table2</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- table for important telephone extensions -->
  <table id="AjaxGetTable1ID" class="table-responsive container table table-hover table-bordered table-allignment" style="width:35%; padding-bottom:10px; margin-right: 15.5%">
    <theader>
      <tr style="width:03%">
        <th style="width:60%">Employee</th>
        <th style="width:22%">Extension Code</th>
      </tr>
    </theader>
    <tbody id="htmlbody"></tbody>
  </table>
  <div class="wrap">
    <form id="someform">
      <input type="text" id='getNameOfEmployeeID' class="searchTerm" placeholder="Employee Name" name="employeeNamePassToURL">
      <button type="submit" onclick='displayEmployee()' class="searchButton" id="submitid">
        <i class="fa fa-search"></i>
      </button>
    </form>
  </div>
  <p id="demo"> </p>
  <p id="demo2"> </p>
  <p id="myID"> </p>
  <p id="displayResult" style="width:35%; padding-bottom:10px; margin-left: 17%; margin-top: 5%"></p>
  <script src="js/jquery-3.2.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/main.js"></script>
  <!-- <script src = "js/table1.js"></script> -->
</body>
</html>

将URL响应显示到HTML表中

2 个答案: