Javascript 如何仅使用jquery和ajax从文本文件中选择ID并输出结果_Javascript_Jquery_Html_Ajax

Javascript 如何仅使用jquery和ajax从文本文件中选择ID并输出结果

javascript jquery html ajax

Javascript 如何仅使用jquery和ajax从文本文件中选择ID并输出结果,javascript,jquery,html,ajax,Javascript,Jquery,Html,Ajax,我有一个从csv文件加载数据的ajax脚本。如何选择ID列并输出结果？例如，以下csv文件包含： ID,State,City,ZipCode 1,Florida,Tampa,33601 2,Ohio,Westerville,43081 3,Indiana,Westfield,46032 我想选择ID2并输出俄亥俄州，威斯特维尔，43081。到目前为止，我拥有的以下代码输出了所有内容。我希望能够在不使用数据库的情况下选择我的id并输出结果： <!DOCTYPE html> <h

我有一个从csv文件加载数据的ajax脚本。如何选择ID列并输出结果？例如，以下csv文件包含：

ID,State,City,ZipCode
1,Florida,Tampa,33601
2,Ohio,Westerville,43081
3,Indiana,Westfield,46032

我想选择ID2并输出俄亥俄州，威斯特维尔，43081。到目前为止，我拥有的以下代码输出了所有内容。我希望能够在不使用数据库的情况下选择我的id并输出结果：

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <title>Parsing CSV Files</title>
  <script>

        (function($) {

  //$(document).ready(function() {

  'use strict';

  $.ajax({
    url: 'csv_data.csv',
    dataType: 'text',
  }).done(successFunction);

  function successFunction(data) {
    var allRows = data.split(/\r?\n|\r/);
    var table = '<table>';
    for (var singleRow = 0; singleRow < allRows.length; singleRow++) {
      if (singleRow === 0) {
        table += '<thead>';
        table += '<tr>';
      } else {
        table += '<tr>';
      }
      var rowCells = allRows[singleRow].split(',');
      for (var rowCell = 0; rowCell < rowCells.length; rowCell++) {
        if (singleRow === 0) {
          table += '<th>';
          table += rowCells[rowCell];
          table += '</th>';
        } else {
          table += '<td>';
          table += rowCells[rowCell];
          table += '</td>';
        }
      }
      if (singleRow === 0) {
        table += '</tr>';
        table += '</thead>';
        table += '<tbody>';
      } else {
        table += '</tr>';
      }
    }
    table += '</tbody>';
    table += '</table>';
    $('body').append(table);
  }

  // });

})(jQuery);
</script>
</head>

<body>
Content Displayed Here
</body>

</html>


解析CSV文件
（函数（$）{
//$（文档）.ready（函数（）{
"严格使用",；
$.ajax({
url:'csv_data.csv'，
数据类型：“文本”，
}).完成（成功功能）；
函数成功函数（数据）{
var allRows=data.split（/\r？\n |\r/）；
var表=“”；
对于（var singleRow=0；singleRow

因为您已经在

allRows[singleRow]拆分行了。拆分（“，”）

您可以使用该值检查Id（2）

改变你的函数，比如

var data='ID，State，City，ZipCode\r1，佛罗里达，坦帕，33601\r2，俄亥俄州，威斯特维尔，43081\r3，印第安纳州，威斯特菲尔德，46032'；
$（文档）.ready（函数（）{
成功功能（数据）；
});
函数成功函数（数据）{
var allRows=data.split（/\r？\n |\r/）；
var表=“”；
对于（var singleRow=0；singleRow


分开做，从thead
开始，然后tbody

$.ajax({
    url: 'csv_data.csv',
    dataType: 'text',
}).done(successFunction);

function successFunction(data) {
    var allRows = data.split(/\r?\n|\r/);
    var table = '<table>';
    for (var singleRow = 0; singleRow < allRows.length; singleRow++) {

       // This is only for the head : THE FIRST LINE before \n
       var rowCells = allRows[singleRow].split(',');
       if (singleRow === 0) {
           table += '<thead>';
           table += '<tr>';
           for (var rowCell = 0; rowCell < rowCells.length; rowCell++) {
               table += '<th>';
               table += rowCells[rowCell];
               table += '</th>';                
           }
           table += '</ tr>';
           table += '</ thead>';
       }else{
           // To select an ID
           if(rowCells[0] == '2'){
               table += '<tbody>';
               table += '<tr>';

               for (var rowCell = 0; rowCell < rowCells.length; rowCell++) {
                   table += '<td>';
                   table += rowCells[rowCell];
                   table += '</td>';
               }
               table += '</ tr>';
               table += '</ tbody>';
           }
       }
    }
   table += '</table>';
   $('body').append(table);

$.ajax({
url:'csv_data.csv'，
数据类型：“文本”，
}).完成（成功功能）；
函数成功函数（数据）{
var allRows=data.split（/\r？\n |\r/）；
var表=“”；
对于（var singleRow=0；singleRow

}
您可以拆分您的响应并检查ID，我该怎么做？您可以添加您的响应字符串数据吗？不知道如何做。我唯一能得到的就是我在上面贴的东西。我对ajax和jqueryawesome还不熟悉。谢谢你的帮助。最后一件事。是否可以只输出：“Ohio，Westerville，43081”而不是“2 Ohio Westerville 43081”@user3683976是的，您可以检查，我已经更新了答案如果我想将id更改为其他内容，是否有方法动态加载数据？如果csv文件中的值发生更改，HTML文件将如何动态加载？这样我就不必在HTML中更改任何内容file@user3683976所以你的意思是，明天，你可能想打印ID9的数据而不是2，而不改变javascript代码，对吗？没错。我只想能够通过选择一个id来更新csv文件并加载数据，而无需进入脚本并手动输入要加载的id。我仍然会选择要加载的id，只是不希望它进入脚本并手动放入。谢谢您的回复。是否有一种方法可以动态更改数据，比如说是否要更新csv文件并将id更改为其他内容。我如何动态地进行加载？基本上，html文件如何加载csv文件的更改？每次csv文件更改时调用此ajax函数，或者您可以添加一个setIntervale（）
函数来连续调用ajax函数。如果您想从CSV文件中更改数据，请考虑在后端执行它，或者您可以用Ajax结果生成一个新的CSV文件。