angular.js - Angularjs指令中运用ajax序列化data值为json时失败

问题描述

问 题

项目背景：
1、框架选用Angularjs
2、插件选用的是Angularjs版本的select2
3、项目后台需要接收的contentType为json格式

遇到问题：
使用插件select2的内置指令中设置ajax时，前后端联调失败，错误响应为

{
    "data":"Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported",
    "message":"http://localhost/v1/user/search",
    "resultCode":"402"
}

问题陈述：
插件中涉及到该问题处的源代码

data: function (term) {
   return JSON.stringify({keyword: term});
},

理想中的request应该是这样的，response返回成功

现在json序列化后的情况是这样的，格式不是request payload

排除原因：
1、ngnix已解决跨域问题，且其他接口均调用成功
2、已在全局设置contentType，且其他接口均调用成功，并且在指令中又单独设置了一次

$http.defaults.headers.post = {
  'Content-Type': 'application/json;charset=utf-8'
};

推测可能原因：
1、无法JSON.stringify序列化data值，可能是我写的方式不对吧
2、contentType在这个指令中没有设置成功
3……

附上插件涉及到此问题的完整代码，烦请指点！

app.factory('select2Query', function ($timeout) {
  return {
    testAJAX: function () {
      var config = {
        minimumInputLength: 1,
        ajax: {
          url: "http://localhost/v1/user/search",
          type: 'POST',
          contentType: "application/json; charset=utf-8",
          /*data: function (term) {
            return { keyword: term };
          },*/
          data: function (term) {
            return JSON.stringify({keyword: term});
          },
          results: function (data, page) {
            return {results: data.list};
          }
        },
        formatResult: function (data) {
          return data.title;
        },
        formatSelection: function (data) {
          return data.title;
        }
      };
      return config;
    }
  }
});

解决方案

找到方法了，这里设置contentType必须要写在params里面

params: {
   contentType: 'application/json'//此处可修改contentType类型
},

这篇关于angular.js - Angularjs指令中运用ajax序列化data值为json时失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！