JQuery 函数不返回 JSON 列表 - Play Framework，JPA答案

【问题标题】：JQuery function not returning JSON list - Play Framework, JPAJQuery 函数不返回 JSON 列表 - Play Framework，JPA
【发布时间】：2016-05-26 21:53:02
【问题描述】：

我对 Play 非常陌生，我正在尝试在介绍 Youtube 视频 (https://www.youtube.com/watch?v=bLrmnjPQsZc) 中完成练习。

我正在做一些不同的事情。 1）我正在使用更新版本的 Play（2.5 左右）。我还在为我的持久层和本地 Postgres DB 而不是 h2 In memory DB 使用 JPA 而不是 eBean。不过，这不应该影响我的问题。

基本上，我添加了一个“/persons” GET 端点，它以 JSON 格式返回我的 Person 表中的人员。我已确认此方法有效，并且正在返回有效的 JSON。

但是，我的 JQuery 似乎没有达到它。根据教程，我已经在 Coffeescript 中编写了我的查询，现在正在检查它编译成的 Javascript。

这是咖啡脚本：

$ ->
  $.get "/persons", (persons) ->
    $.each persons, (index, person) ->
      $('#persons').append $("<li>").text person.name

这是翻译后的 javascript（如预期的那样位于http://localhost:8080/assets/js/index.js）：

(function() {
  $(function() {
    return $.get("/persons", function(persons) {
      return $.each(persons, function(index, person) {
        return $('#persons').append($("<li>").text(person.name);
      });
    });
  });

}).call(this);

//# sourceMappingURL=index.js.map

这是我的模板：

@(message: String)

@main("Welcome to Play") {

    <script type='type/javascript' src='@routes.Assets.versioned("js/index.js")'></script>

    <ul id="persons"></ul>

    <form action="@routes.HomeController.addPerson()" method="post">
    <input type="text" name="name" />
    <button>Add Person</button>
    </form>

}

“添加人员”正在运行。当我在浏览器中手动执行http://localhost:8080/persons 时，我可以保留 Persons 并查看它们。

显然我的 javascript 技能不是那么强，所以任何关于可能出现问题的帮助或我如何进一步排除 li 没有被填充的原因将不胜感激。

【问题讨论】：

我也刚刚注意到 return $('#persons').append($("
").text(person.name); 缺少一个额外的右括号。

【解决方案1】：

最后看起来好像少了一个右括号。

(function() {
  $(function() {
    return $.get("/persons", function(persons) {
      return $.each(persons, function(index, person) {
        return $('#persons').append($("<li>").text(person.name)); //here
      });
    });
  });
}).call(this);

https://jsfiddle.net/8va4k4wu/2/

【讨论】：

谢谢。我尝试放弃咖啡脚本（只是javascript）并按照您所说的进行修改，不幸的是同样的行为。不是 li 添加到 ul 中
我创建了一个 jsfiddle 并尝试做类似的事情。所有这些功能和回报是否让你有所收获？我试图简化一点，但很想知道。让我知道这个例子是否适合你。 jsfiddle.net/8va4k4wu/1
我还通过添加额外的右括号使其工作。请参阅我的问题。 jsfiddle.net/8va4k4wu/2 我只用一些假定的 json 模拟了 $.get 调用。

【解决方案2】：

我终于明白了。在我的 javascript 中插入一些 console.log 行并意识到该功能实际上没有被命中后，我意识到我的模板脚本标签中有一个错字：

<script type='type/javascript' src='@routes.Assets.versioned("js/index.js")'></script>

脚本类型应该是“text/javascript”而不是“type/javascript”。

修改这会导致控制台输出“ReferenceError: $ is not defined”，这很快导致我遇到了这个问题，并且建议的解决方案对我有用：

Uncaught ReferenceError: $ is not defined (using play framework)

【讨论】：