javascript - Java-AngularJS http get方法获取带有 ""和转义字符的字符串

Question

我使用这个函数来发出http get请求:

    $scope.fetchResult = function() {
    $http.get('search/result').success(function(getResult){
        $scope.result = getResult;
    });
};

这是后端函数:

    @RequestMapping("/result")
public @ResponseBody String getResult() {
    return searchService.getResult();
}

问题是它将字符串打印到网页上，开头带有“字符，末尾也包含转义字符。我真的找不到这背后的任何逻辑。例如，如果字符串是:

String result = "Hello";

它不会在网页上打印 Hello，而是打印“Hello”。另一个例子:

String result = "Found \"" + keyword + "\" '" + count + "' times at \"" + website + "\"";

它也打印转义字符。假设关键字是关键字，计数为 0，网站为 http://stackoverflow.com结果在网页上打印如下:

"Found \""keyword"\" '"0"' times at \""http://stackoverflow.com"\""

虽然我显然期望:

Found "keyword" '0' times at "http://stackoverflow.com"

我该如何解决这个问题？这对我来说没有任何意义，我是 js 和 Web 开发的新手。

编辑:如果我使用 List<String>而不是String并在 html 表单上执行此操作:

<p ng-repeat:"res in result">{{res}}<p>

它有效。但我真的不想以这种方式使用它，因为我不需要列表，而是单个字符串。

Answer 1

Spring 有一种称为后缀策略的东西，它使框架能够直接从 URL 检查路径扩展以确定输出内容类型。

您看到的编码结果是由于 @RequestMapping 被设置为带有 .json 扩展名的 /result.json 导致结果作为 Json 对象返回的。

要解决此问题，您有多种选择。

选项 1:

在 Javascript 中将返回的响应作为 Json 对象进行处理。

选项 2:

将@RequestMapping值重命名为/result。下面是一个代码示例:

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloWorldController {
   @CrossOrigin(origins = "*")
   @RequestMapping(value="/result")
   public @ResponseBody String sayHello() {
      String website = "http://stackoverflow.com";
      int count = 4;
      String keyword = "keyword";
      return "Found \"" + keyword + "\" '" + count + "' times at \"" + website + "\"";
   }
}

Javascript(此处添加接受 header 是可选的)

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("/result",{headers: { 'Accept': 'text/plain' }})
  .then(function(response) {
      $scope.result = response.data;
  });
});
</script>

选项 3

保留 @RequestMapping 值，如 /result.json，但使用 WebMvcConfigurerAdapter 禁用后缀策略。下面是代码示例

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloWorldController {
   @CrossOrigin(origins = "*")
   @RequestMapping(value="/result.json", method = RequestMethod.GET, produces="text/plain")
   public @ResponseBody String sayHello() {
      String website = "http://stackoverflow.com";
      int count = 4;
      String keyword = "keyword";
      return "Found \"" + keyword + "\" '" + count + "' times at \"" + website + "\"";
   }
}

WebMvcConfigurerAdapter 类

import org.springframework.context.annotation.Configuration;
import org.springframework.http.MediaType;
import org.springframework.web.servlet.config.annotation.ContentNegotiationConfigurer;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@Configuration
@EnableWebMvc
public class WebConfig extends WebMvcConfigurerAdapter {

    @Override
    public void configureContentNegotiation(ContentNegotiationConfigurer configurer) {
        configurer.favorPathExtension(false)
        .favorParameter(false)
        .ignoreAcceptHeader(false)
        .useJaf(false)
        .defaultContentType(MediaType.TEXT_PLAIN);
    }
}

Javascript

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("/result.json",{headers: { 'Accept': 'text/plain' }})
  .then(function(response) {
      $scope.result = response.data;
  });
});
</script>