如何使用 jQuery AJAX 发布 JSON 数据

Question

我最近接到了一个项目，说明如下：

创建一个 HTML 页面，该页面将调用我们的 API 端点以 在我们的 API 记录器上检索日志列表，将数据加载到 视觉上令人愉悦的网格。该页面应该每分钟进行一次调用， 通过 AJAX 使用新数据更新现有行（部分页面更新， 整个页面不应重新加载）。如果该行不再存在于新的 数据，删除该行。如果任何行中都不存在新数据， 用数据添加一个新行。

API 调用将使用带有 jQ​​uery AJAX 的 POST 方法进行 sn-ps 到我们的 API 端点，使用以下 JSON 请求对象：

{
 "token": "CyvW1tW7hBMGNvSY752xr4QbK1TStbxhy8xSGfpMm1JxlSwjn7fXWU2LD7tVoP5przifFd0TnAHMJxf0maAvyAGN90FHfWk76IhO"
}

来自服务器的 JSON 响应对象应该类似于 这个：

{
 "logs": [
 {
 "Description": string,
 "ApplicationName": string,
 "Client_IP": string,
 "Server_IP": string,
 "RequestEndPoint": string,
 "LastOccurrence": datetime string,
 "ResponseCode": integer,
 "Last24HourLogCount": integer
 },
 ]
}

POST 请求和收集 JSON 数据时遇到问题。当我使用 Postman 进行 API 测试调用时，我能够接收 JSON 数据，但当我通过我的 HTML 页面进行调用时，以下是我的尝试：

尝试 1

在这里，我创建了一个POST 到端点的请求，并尝试将 JSON 数据转换为要在警报中显示的字符串：

我收到以下警报弹出窗口：

这是控制台中的消息：

如果我删除令牌标头并将来自 Postman 的 JSON 数据添加到我的变量中，则会收到以下控制台错误：

$.ajax({
    type: "POST",
    url: "https://fetch1.hipposhq.com/hipposapilogstatus",
    data: data,
    dataType: 'json',
    headers:{
         "token": "CyvW1tW7hBMGNvSY752xr4QbK1TStbxhy8xSGfpMm1JxlSwjn7fXWU2LD7tVoP5przifFd0TnAHMJxf0maAvyAGN90FHfWk76IhO"
    },
    success: function(data){alert(JSON.stringify(data))},
    error: function(errMsg) {
         alert(errMsg);
    }
});

尝试 2

在这里我创建了一个POST 到端点的请求并尝试在控制台日志中显示 JSON 数据，但我收到了一个错误：

这是控制台中的消息：

如果我删除令牌标头并将 Postman 中的 JSON 数据添加到我的变量中，我会收到相同的错误：

var data = {}

$.ajax({
    type: "POST",
    url: "https://fetch1.hipposhq.com/hipposapilogstatus",
    data: data,
    dataType: 'json',
    headers:{
        "token": "CyvW1tW7hBMGNvSY752xr4QbK1TStbxhy8xSGfpMm1JxlSwjn7fXWU2LD7tVoP5przifFd0TnAHMJxf0maAvyAGN90FHfWk76IhO"
    },             
    success: function(data){
        console.log(data);
    }
});

尝试 3

在这里，我使用从 Postman 收到的 JSON 数据创建了一个POST 请求（实际数据省略）来接收 JSON 数据并将其显示在控制台日志中，但我收到了一个错误：

这是控制台中的错误：

当我添加令牌标头时，我收到相同的访问和资源错误：

$.ajax({
    type:"POST",
    url:"https://fetch1.hipposhq.com/hipposapilogstatus",
    processData: false,
    dataType: 'json',
    data: JSON.stringify({
            "logs": [
                {
                "Description": "string",
                "ApplicationName": "string",
                "Client_IP": "string",
                "Server_IP": "string",
                "RequestEndPoint": "string",
                "LastOccurrence": "datetime string",
                "ResponseCode": integer,
                "Last24HourLogCount": integer,
                },
            ]
        }),
    success: function(data){
        console.log(data);
    }
});

我希望能够在控制台中以字符串/对象/数组的形式接收 JSON 数据，以便将其显示在我的页面上，但我不确定从这里去哪里。

Answer 1

您必须将令牌作为数据发送

const $output = $("#logs");
const process = response => $output.html(
    response.logs.map(log =>  `<hr/><dl>${
      Object.entries(log).map(([key,val]) => `<dt>${key}</dt><dd>${val}</dd>`).join("")
    }</dl>`).join(""));

$.ajax({
  type: "POST",
  url: "https://fetch1.hipposhq.com/hipposapilogstatus",
  dataType: 'json',
  data: {
    "token": "CyvW1tW7hBMGNvSY752xr4QbK1TStbxhy8xSGfpMm1JxlSwjn7fXWU2LD7tVoP5przifFd0TnAHMJxf0maAvyAGN90FHfWk76IhO"
  },
  success: process,
  error: function(request, status, error) {
    console.log(request.responseText);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="logs"><div>

Answer 2

var data = {
  "logs": [{
    "Description": 'string',
    "ApplicationName": 'string',
    "Client_IP": 'string',
    "Server_IP": 'string',
    "RequestEndPoint": 'string',
    "LastOccurrence": 'datetime string',
    "ResponseCode": 'integer',
    "Last24HourLogCount": 'integer'
  }, ]
}

$.ajax({
  type: "POST",
  url: "https://fetch1.hipposhq.com/hipposapilogstatus",
  data: data,
  dataType: 'JSON',
  headers: {
    "token": "CyvW1tW7hBMGNvSY752xr4QbK1TStbxhy8xSGfpMm1JxlSwjn7fXWU2LD7tVoP5przifFd0TnAHMJxf0maAvyAGN90FHfWk76IhO"
  },
  success: function(data) {
    console.log(data);
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>