Question

我正在尝试从json文件中提取数据，并将其显示在我的网页上的表格中。 JSON文件使用来自api的电影数据动态更新。我现在正在使用的函数给出了有关需要名称的语法错误。

我尝试命名该函数，但到目前为止没有任何效果。我是Web开发的新手，所以很抱歉，如果答案很明显。

index.html

<!DOCTYPE html>
<html>
<head>
<title>Furby</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="static/layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script>
  $(function() {
  var table = document.getElementById('userdata');
  for(var i = table.rows.length - 1; i > 0; i--)
  {
    table.deleteRow(i);
  }
  $.getJSON('static/movies.json', function(data) {
    $.each(data.movie, function(i, f) {
      var url = "https://image.tmdb.org/t/p/w92/" + f.url;
      var tblRow = "<tr>" + "<td>" + f.title + "</td>" + "<td>" + "<img id = 'url_img' >" + "</td>" + "</tr>"
      $(tblRow).appendTo("#userdata tbody");
      document.getElementById('url_img').src = url;
      document.getElementById('url_img').id = url;
    });
  });
});
</script>
</head>
<body id="top">
  <div id="pageintro" class="hoc clear">
    <!-- ################################################################################################ -->
    <div class="flexslider basicslider">
      <ul class="slides">
        <li>
          <article>
            <h3 class="heading">Find A Movie</h3>
            <p>Search from thousands of online movies!</p>
            <footer>
              <form class="group" method="post" action="search" onsubmit="function();">
                <fieldset>
                  <legend>Search:</legend>
                  <input type="text" value="" placeholder="Search Here&hellip;" name="search">
                  <button class="fa fa-sign-in" type="submit" title="Submit"><em>Submit</em></button>
                </fieldset>
              </form>
            </footer>
          </article>
          <div class="wrapper">
            <div class="profile">
              <table id= "userdata" border="2">
                <thead>
                  <th>Title</th>
                  <th>Cover</th>
                </thead>
                <tbody></tbody>
              </table>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- ################################################################################################ -->
  </div>
  <!-- ################################################################################################ -->
<script src="static/layout/scripts/jquery.min.js"></script>
<script src="static/layout/scripts/jquery.backtotop.js"></script>
<script src="static/layout/scripts/jquery.mobilemenu.js"></script>
<script src="static/layout/scripts/jquery.flexslider-min.js"></script>
</body>
</html>

下面的代码将用电影标题和图像更新我的表一次，但是我必须在页面上进行一次强制刷新才能更新它。我认为是由于名称错误导致每次我搜索电影时都无法运行此代码。

编辑：添加了更多相关代码。抱歉，这是我第一次发布。

Answer 1

从表单中删除内联事件侦听器。

<form class="group" method="post" action="search">

命名您的函数

function performSearch () {
  var table = document.getElementById('userdata');
  for (var i = table.rows.length - 1; i > 0; i--) {
    table.deleteRow(i);
  }
  $.getJSON('static/movies.json', function(data) {
    $.each(data.movie, function(i, f) {
      var url = "https://image.tmdb.org/t/p/w92/" + f.url;
      var tblRow = "<tr>" + "<td>" + f.title + "</td>" + "<td>" + "<img id = 'url_img' >" + "</td>" + "</tr>"
      $(tblRow).appendTo("#userdata tbody");
      document.getElementById('url_img').src = url;
      document.getElementById('url_img').id = url;
    });
  });
}

在页面加载时调用您的函数。

$(function(){
    performSearch();
});

并设置表单以对提交进行搜索。

$(function(){
    performSearch();

    $('.group[action="search"]').on('submit', function(e){
        e.preventDefault();
        performSearch();
    });
});

Answer 2

1）您有2个jQuery Lib，那是错误的，您只需要检查一个版本即可。

func loadNSView() {
    let newView = NSView()
    newView.frame = self.view.frame
    newView.wantsLayer = true
    newView.layer?.backgroundColor = NSColor.white.cgColor
    self.view.addSubview(newView)
    self.view.needsDisplay = true
}

2）您的HTML表无效：您忘记放置忘记<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script> . . . <script src="static/layout/scripts/jquery.min.js"></script>

<tr> .... </tr>

我还将<table> <thead> <tr> <th>Title</th> <th>Cover</th> </tr> </thead> <tbody id="userdata-tbody"></tbody> </table>放在id="userdata-tbody"上，否则您也删除了<tbody>行

因此将您的jQuery库放在代码之前：

<thead>

如何修复SyntaxError：函数语句需要一个名称

2 个答案: