时间戳

首页 > 解决方案 > 仅在 jquery ajax 响应的行上显示的数据表

javascript - 仅在 jquery ajax 响应的行上显示的数据表

问题描述

我使用 jquery 编写了两个不同的函数，第一个 function(table()) 在 jquery ajax 成功中通过 JSON 响应中的对象循环。然后调用第二个函数(column())，调用column，参数是第一个循环中对象的数组元素。简而言之，我希望结果是行，其中包含数据库中的数据列。

search();

function search(query){
  
  $.ajax({
        type:'GET',
        url:'/getmsg',
        data:{
                "_token":"{{ csrf_token() }}",
                query:query,
              },
        success:function(response){
          table = row(response);
          $("#content").html(table);
          console.log(response);
        },
});
}

//ROWS
function row(response){
  //  LOOP TROUGH THE OBJECTS
  //  DISPLAY THE ROWS
  
  columns = "";
 
  for(i = 0; i<response.length; i++){
    //columns = "<tr>";
    object = response[i];
    columns += column(object);
  }
  console.log(columns);
  return columns;
}

//COLUMN
function column(object){
  // return object["id"];
  // output = "<td>"+object['id']+"</td><td>"+object['name']+"</td><td>"+object['email']+"</td>";
  obj = Object.values(object);
  output = "<tr>";
  for(i=0; i<obj.length; i++){
    output +="<td>"+obj[i]+"</td>";
  }
  output += "</tr>";
  return output;
}
这是来自 HTML 的表格 
<table class="table table-bordered" id="transaction-table">
      <input type="text" onkeyup="search(this.value)">
      <thead>
        <tr>
          <th>Ref Id</th>
          <th>Desc</th>
          <th>Amount</th>
          <th>Status</th>
          <th>Date</th>
        </tr>
      </thead>
      <tbody id="content"> 
        
      </tbody>
      <tfoot>
        <tr>
          <th>Ref Id</th>
          <th>Desc</th>
          <th>Amount</th>
          <th>Status</th>
          <th>Date</th>
        </tr>
    </tfoot>
  </table>

下面是输出（不要介意表头上的标签） 在此处输入图像描述

这是我的 CONSOLE.LOG 从以下代码中输出的内容。

success:function(response){
          table = row(response);
          $("#content").html(table);
          console.log(response);
        },

结果 在此处输入图像描述

标签： javascriptphphtmljquerylaravel

解决方案

这就是我能够修复此错误的方法。 第 1 步 1. 我试图通过在第一个函数表中显示循环计数来找出逻辑错误发生的位置，并且它工作正常，这意味着错误在 column() 函数内 2. 我尝试了相同的在第二个函数 column() 中的方式，我发现它只循环一次。这意味着我的注意力集中。不过，它没有显示任何语法错误。

第 2 步我开始怀疑范围界定问题我决定复制 column() 函数中的脚本并将其粘贴到循环中的 table() 中。这样我直接执行代码，但是您注意到外循环和内循环具有具有相同声明（ i ）的指针变量，这将导致语法错误。我将内部循环指针声明更改为 (j) 它开始正常工作。 我一直在与之斗争的错误是范围错误。与我所知道的 JAVA 和 PHP 不同，我认为 js 有最复杂的范围逻辑错误，所以要小心。 结论 在 JavaScript 中有两种作用域： 1. 局部作用域 1. 全局作用域

根据https://www.w3schools.com/js/js_scope.asp 本地 JavaScript 变量

在 JavaScript 函数中声明的变量对函数来说是 LOCAL 的。

局部变量具有函数作用域：它们只能从函数内部访问。例子

// code here can NOT use carName

function myFunction() {
  var carName = "Volvo";

  // code here CAN use carName

}

由于局部变量只在其函数内部被识别，同名变量可以在不同的函数中使用。

局部变量在函数启动时创建，在函数完成时删除。

全局 JavaScript 变量

在函数外部声明的变量变为 GLOBAL。

全局变量具有全局范围：网页上的所有脚本和函数都可以访问它。例子

var carName = "Volvo";

// code here can use carName

function myFunction() {

  // code here can also use carName

}

我不得不将 POING 变量名称从 i 更改为 j，下面是我的代码在调试后的样子

search();

function search(query){
  
  $.ajax({
        type:'GET',
        url:'/getmsg',
        data:{
                "_token":"{{ csrf_token() }}",
                query:query,
              },
        success:function(response){
          table = row(response);
          $("#content").html(table);
          console.log(response);
        },
});
}

//ROWS
function row(response){
  //  LOOP TROUGH THE OBJECTS
  //  DISPLAY THE ROWS
  
  columns = "";
 
  for(i = 0; i<response.length; i++){
    //columns = "<tr>";
    object = response[i];
    columns += column(object);
  }
  console.log(columns);
  return columns;
}

//COLUMN
function column(object){
  // return object["id"];
  // output = "<td>"+object['id']+"</td><td>"+object['name']+"</td><td>"+object['email']+"</td>";
  obj = Object.values(object);
  output = "<tr>";
  for(j=0; j<obj.length; j++){
    output +="<td>"+obj[j]+"</td>";
  }
  output += "</tr>";
  return output;
}

正确的输出 在此处输入图像描述

结论 当你从一个函数调用第二个函数时，确保在声明一个变量时给它一个唯一的名字，或者用 var（显式）声明它，否则你将面临一个逻辑错误。

推荐阅读