AngularJS意外的标记<位于ng视图中位置0的JSON中

问题描述:

我有一点问题。我正在研究angularjs单个Web应用程序页面,我正在尝试在角度模块中添加SockJS。AngularJS意外的标记<位于ng视图中位置0的JSON中

这是我的主页。

<html ng-app="myApp"> 
    <head> 
     <title>Timeline Page</title> 
     <meta charset="utf-8"> 
     <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css" /> 
     <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
     <link href="css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" /> 
     <link href="css/components.min.css" rel="stylesheet" id="style_components" type="text/css" /> 
     <link href="css/plugins-md.min.css" rel="stylesheet" type="text/css" /> 
     <link href="css/layout.min.css" rel="stylesheet" type="text/css" /> 
     <link href="css/light.min.css" rel="stylesheet" type="text/css" id="style_color" /> 
     <link href="css/custom.min.css" rel="stylesheet" type="text/css" /> 
    </head> 
    <body class="page-container-bg-solid page-md"> 
     <div ng-view></div> 
    </body> 
    <script type="text/javascript" src="js/lib/angular.min.js"></script> 
    <script type="text/javascript" src="js/lib/angular-route.min.js"></script> 
    <script type="text/javascript" src="js/app.js"></script> 
    <script type="text/javascript" src="js/lib/sockjs-0.3.4.js"></script> 
    <script type="text/javascript" src="js/lib/stomp.js"></script> 
</html> 

这是js代码。

var myApp = angular.module('myApp', ['ngRoute', 'myApp.controllers', 'myApp.services', function() { 
     var socket = new SockJS('/hello'); 
     stompClient2 = Stomp.over(socket); 
     stompClient2.connect({}, function (frame) { 
      con = true; 
      console.log('Connected: ' + frame); 
      stompClient2.subscribe('/topic/greetings', function (greeting) { 
       showGreeting(JSON.parse(greeting.body).content); 
      }); 
     }); 
    }]); 

当我尝试这一点,我有这样的问题:

Uncaught SyntaxError: Unexpected token < in JSON at position 0 

我有很多页,我想开一个插座,当我打开网页,但它不工作。任何人都可以帮助我?

编辑 Greeting.class

public class Greeting { 

    private String content; 

    public Greeting(String content) { 
     this.content = content; 
    } 

    public String getContent() { 
     return content; 
    } 

} 

GreetingController.class

@Controller 
public class GreetingController { 

    @MessageMapping("/hello") 
    @SendTo("/topic/greetings") 
    public Greeting greeting(HelloMessage message) throws Exception { 
     //Thread.sleep(1000); // simulated delay 
     return new Greeting("Hello, " + message.getName() + "!"); 
    } 

} 
+1

你能记录'greeting'的内容吗? –

+0

问题解决。这只是安全问题。 –

您必须具有无效JSON响应。删除JSON.parse应该有助于避免此错误。不过,你应该只是在服务器端工作。您可以使用JSON Lint来验证响应JSON。

var myApp = angular.module('myApp', ['ngRoute', 'myApp.controllers', 'myApp.services', function() { 
     var socket = new SockJS('/hello'); 
     stompClient2 = Stomp.over(socket); 
     stompClient2.connect({}, function (frame) { 
      con = true; 
      console.log('Connected: ' + frame); 
      stompClient2.subscribe('/topic/greetings', function (greeting) { 
       showGreeting(greeting.body); 
      }); 
     }); 
    }]); 

它好像无论是从greeting.body回来是不是一个有效 JSON字符串。

鉴于你的错误在位置0有一个<我会假设HTML从你的API而不是意外返回。

+0

我在一个页面的不同项目中尝试了相同的代码,它正在工作,但是当我尝试这样的单个网页应用程序时。它不工作。我不认为是这样。 –

+0

@Gürsel注销“greeting.body”中的内容...... – Neal

+0

我添加了这些类。 –