如何使用 Typicode Json 服务器创建复合 Json 对象

Question

我在使用 jQuery 的 Web 应用程序中工作，我对 JSON 格式感到困惑。对于我使用的服务器 restful Json Server.

问题是不知道是什么问题。错误是我 post 到服务器的 Json 格式（HTTP POST 和 Ajax）似乎不正确。我将尝试逐步解释这一点。

Json服务器（在http://localhost:3000/db）的初始情况是：

{
   "userRecipes": []
}

现在，我创建一个 Json 对象如下：

var example2json = {
    "description":"some desc",
    "trigger":{
        "triggerType":"exampleType",
        "field1":"something1",
        "field2":"something2",
        "field3":"something3"
    }
};

然后将这个虚构对象发送三次到服务器：

$.ajax({
    method: "post",
    url: "http://localhost:3000/userRecipes",
    data: example2json,
    dataType: "json",
    success: function(response) {
        $('#recipedDescriptionModal').modal('hide');
        url = "#SuccessRepice";
        window.location.replace(url);

    }
});

在此之后 Json 服务器状态结果为：

{
  "userRecipes": [
    {
      "description": "some desc",
      "trigger[triggerType]": "exampleType",
      "trigger[field1]": "something1",
      "trigger[field2]": "something2",
      "trigger[field3]": "something3",
      "id": 1
    },
    {
      "description": "some desc",
      "trigger[triggerType]": "exampleType",
      "trigger[field1]": "something1",
      "trigger[field2]": "something2",
      "trigger[field3]": "something3",
      "id": 2
    },
    {
      "description": "some desc",
      "trigger[triggerType]": "exampleType",
      "trigger[field1]": "something1",
      "trigger[field2]": "something2",
      "trigger[field3]": "something3",
      "id": 3
    }
  ]
}

为什么 Json 格式发生变化？当我想访问我必须做的字段时：

console.log(JSON.stringify(response.data.userRecipes[1]["trigger[triggerType]"]));

但我会这样做：

console.log(JSON.stringify(response.data.userRecipes[1].trigger.triggerType));

我肯定有哪里出错了，但不知道在哪里。

我唯一怀疑的是我错误地创建了 Json（嵌套在数组元素中的某个对象）或者我不知道这个 Json 服务器.

Answer 1

问题已解决。必须指定 POST 内容的类型：

contentType: 'application/json; charset=UTF-8',

所以，从这个：

$.ajax({
    method: "post",
    url: "http://localhost:3000/userRecipes",
    data: example2json,
    dataType: "json",
    success: function(response) {
        $('#recipedDescriptionModal').modal('hide');
        url = "#SuccessRepice";
        window.location.replace(url);

    }
});

到那个：

$.ajax({
    method: "post",
    url: "http://localhost:3000/userRecipes",
    data: example2json,
    contentType: 'application/json; charset=UTF-8', //This is the money shot ✅
    success: function(response) {
        $('#recipedDescriptionModal').modal('hide');
        url = "#SuccessRepice";
        window.location.replace(url);

    }
});

就我而言，我混淆了 dataType 和 contentType 这两个字段。

dataType字段用于指定响应的数据格式.

contentType用于指定request的数据格式。

如何使用 Typicode Json 服务器创建复合 Json 对象

How to create composite Json object working with Typicode Json Server

jquery

json

nested

json-server