解决angularjs前后端分离调用接口传递中文时中文乱码的问题

当使用AngularJS进行前后端分离开发时，经常会出现调用接口传递中文时出现中文乱码的问题。这种问题通常是由于前后端使用的字符编码不一致导致的。下面给出一个完整的解决方案：

步骤一：后端设定字符编码

后端需要使用UTF-8字符编码来处理请求，确保在返回JSON数据时不会出现中文乱码。在Spring Boot框架中，可以在application.properties文件中添加以下设置：

spring.http.encoding.charset=UTF8
spring.http.encoding.enabled=true
spring.http.encoding.force=true

步骤二：前端设定字符编码

在HTML头部，需要添加以下标记，来设置前端使用UTF-8字符编码来处理请求：

<meta charset="utf-8">

步骤三：在AngularJS中进行编码和解码

在AngularJS中，使用encodeURIComponent方法对中文进行编码，以确保传递给后端的中文不会出现乱码。同时，使用decodeURIComponent方法对返回的数据进行解码。以下是一个示例：

$scope.sendRequest = function() {
  var url = "http://localhost:8080/api/users";
  var name = encodeURIComponent("张三");
  $http.get(url + "?name=" + name).then(function(response) {
    var data = response.data;
    data.forEach(function(user) {
      user.name = decodeURIComponent(user.name);
    });
    $scope.users = data;
  });
};

示例一：GET请求中的编码和解码

如果后端使用GET方法接收请求，可以按照以下方式来编码：

$http({
  method: "GET",
  url: "http://localhost:8080/api/users",
  params: { name: encodeURIComponent("张三") }
}).then(function(response) {
  // ...
});

示例二：POST请求中的编码和解码

如果后端使用POST方法接收请求，需要使用AngularJS的$httpParamSerializerJQLike方法来进行序列化：

$http({
  method: "POST",
  url: "http://localhost:8080/api/users",
  data: $httpParamSerializerJQLike({ name: "张三" }),
  headers: { "Content-Type": "application/x-www-form-urlencoded" }
}).then(function(response) {
  // ...
});

以上就是解决AngularJS前后端分离调用接口传递中文时中文乱码的完整攻略，通过设置正确的字符编码、在AngularJS中进行编码和解码等多个步骤，可以有效避免中文乱码问题的发生。