Question

这是我的server.js文件的样子：

var express = require('express');
var app = express();
var bodyParser = require('body-parser');

app.use(bodyParser.urlencoded({extname: true}));
app.use(bodyParser.json());

app.use(express.static('public'));

app.listen(3000);

var data = {
    films: [
      {
        title: "Dark Knight",
        director: "Chris Nolan",
        year: 2008
      },
      {
        title: "Inception",
        director: "Chris Nolan",
        year: 2010
      },
      { 
        title: "Inside Out",
        director: "Peter Something",
        year: 2015
      }
    ]
};

app.get('/', function(req, res) {
    res.send('index.html');
});

app.get('/api/films', function(req, res) {
    console.log("working");
    res.send(data.films);
});

app.get('/api/films/:id', function(req, res) {
    console.log("workinggg");
    res.send(data.films[req.params.id]);
});

app.get('/api/films/:id', function(req, res) {
    console.log("workinggg");
    res.send(data.films[req.params.id]);
});

我的HTML文件带有一个简单的显示按钮：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>AJAX</title>
  </head>
  <body>
    <h1>FILMS</h1>
    <button>Display Film</button>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>

最后但并非最不重要的是，我的app.js文件：

console.log("working");

$("button").click(function(){
    console.log("click works!");

    $.ajax({
      url: '/api/films'
  }).done(function(data) {

    $.each(data.films, function(key, value) {
        var title = data[0];
        var director = data[1];
        var year = data[2];
        console.log(title, data, year);
            $('body').append('Director': + director);
    });
  });
});

点击功能正在运行，但之后的一切都没有用。单击按钮时不会显示任何内容。 console.log都没有。根据我的控制台，它说jquery.min.js：2上有一个“未捕获的TypeError：无法读取未定义的属性'长度'错误”，但我不知道这意味着什么。任何人都可以解释这个问题是什么？

我的数据：

var data = {
    films: [
      {
        title: "Dark Knight",
        director: "Chris Nolan",
        year: 2008
      },
      {
        title: "Inception",
        director: "Chris Nolan",
        year: 2010
      },
      { 
        title: "Inside Out",
        director: "Peter Something",
        year: 2015
      }
    ]
};

Answer 1

您需要使用以下标记包装文本：

$('body').append('<p>Director:' + director + '</p>');

你确定每个功能写得好吗？

$.each(data.films, function(key, value) {
        var title = value[0];
        var director = value[1];
        var year = value[2];
        console.log(title, value, year);
        $('body').append('Director:' + director);
    });

考虑将数据更改为值。

单击按钮（Ajax）后数据不会附加到正文

1 个答案: