Question

这里的概念是我想制作一个“最近添加”类型的函数，它将读取csv文件的最后四行并将它们写入HTML页面。我使用的是this HTML5模板。

这是我的代码：

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>My Title</title>
  <link rel="stylesheet" href="style/style.css" type="text/css" media="screen"     />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"    type="textjavascript"></script>
  <script type="text/javascript" src="style/accordian.pack.js"></script>        
  <link rel="shortcut icon" type="image/png" href="style/globe.gif"/>
</head>

<body onload="new Accordian('basic-accordian',5,'header_highlight');">

  <!-- Logo -->
  <div id="logo"><h1>My Logo</h1></div>
  <div id="basic-accordian" >

  <!-- Home Dropdown -->
    <div id="test-header" class="accordion_headings header_highlight">Home</div>
    <div id="test-content">
      <div class="accordion_child">
        <p>The csv values should be placed under this text...</p>

         <script type="text/javascript"charset="utf-8">             
            $(document).ready(function () {
              $.ajax({
              type: "GET",
              url: "db_data.csv",
              dataType: "text",
              success: function(data) {processData(data);}
              });

            // process the data from the data file
            function processData(data) {
              var lines = data.split(/\r\n|\n/);

              var headings = lines[0].split(','); 
              document.write("<h3>Recently Uploaded<h3><br>")
              for (var j=lines.length-2; j>(lines.length-1)-5; j--) { //only load values from the last 4 rows
              var values = lines[j].split(','); 

                 var desc = values[0];
                 var uploader = values[1];
                 var url = values[15];
                console.log(desc + " " + uploader + " " + url)
                document.write(desc + " " + uploader + " " + url)
              }
            }
            });
          </script>     
      </div>
    </div>
</body>
</html>

我一直得到$（...）是null错误。当我删除模板并编写一些基本的HTML只是为了调试它工作！问题是模板需要保留，我不知道它为什么不能用它。

以下是有效的代码：

<!DOCTYPE html>
<html lang="en">
    <body>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript"charset="utf-8">          


        $(document).ready(function() {
            $.ajax({
            type: "GET",
            url: "db_data.csv",
            dataType: "text",
            success: function(data) {processData(data);}
            });

        //process the data from the data file
        function processData(data) {
            var lines = data.split(/\r\n|\n/);

            var headings = lines[0].split(',');
            document.write("<h3>Recently Uploaded<h3><br>")
            for (var j=lines.length-2; j>(lines.length-1)-5; j--) {
            var values = lines[j].split(','); 

               var desc = values[0];
               var uploader = values[1];
               var url = values[15];
                console.log(desc + " " + uploader + " " + url)
                document.write(desc + " " + uploader + " " + url)
            }
        }
    });         
    </script>
</body>

如果需要，请创建一个名为db_data.csv的＆gt; = 15列和＆gt; = 5行的虚拟csv并尝试一下。提前谢谢。

Answer 1

如果您在发布代码段时不是拼写错误，问题可能就在这里：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="textjavascript"></script>

这应该是“text / javascript”，而不是“textjavascript”。

jQuery TypeError：$（...）为null

1 个答案: