$.post 如何從 s3 index.html 發送請求？是獲取還是發布請求

Question

s3 static 托管 index.html 文件有 2 個按鈕 - A、B。它是一個簡單的投票應用程序，單擊任一按鈕后，它會通過 api 網關將值“a”或“b”發送到 lambda 后端 function； lambda function 將值放入發電機數據庫表中。

我不明白“$.post(backend_url...)”是如何工作的，它是發送帖子還是獲取請求？ 我的 lambda 只接受 get 請求。 我在下面指定了這段代碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>A or B?</title>
    <base href="/index.html">
    <meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  </head>
  <body>
    <div id="content-container">
      <div id="content-container-center">
        <h3>A or B?</h3>
        <form id="choice" name='form' method="POST" action="/">
          <button id="a" type="submit" name="vote" class="a" value="a">A</button>
          <button id="b" type="submit" name="vote" class="b" value="b">B</button>
        </form>
        <div id="tip">
          you can vote several times
        </div>
      </div>
    </div>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>

    <script>
       #url to api gateway
      var backend_url = "https://5y7dfynd34.execute-api.us-east-1.amazonaws.com/"

      $.ajaxSetup({
          headers: {
              'Content-Type': 'application/json',
              'Accept': 'application/json'
          }
      });

      $(document).on('click','button[name=vote]',function(){
        vote = this.value;



        # ************* ********************
        #this line below  is tricky for me - does it generate POST or GET REQUEST to api gateway?

        $.post(backend_url, JSON.stringify({ "vote": vote }), function(result,status){ 
          console.log(result);
          if ("success" == status) {
            usedButton = $('button.' + vote);
            usedButton.prop('disabled', true);
            usedButton.html(vote + ' <i class="fa fa-check-circle"></i>');
            usedButton.css('opacity','0.5');
            unusedButton = $('button.' + (vote == 'a' ? 'b' : 'a'));
            unusedButton.prop('disabled', false);
            unusedButton.html(vote == 'a' ? 'b' : 'a');
            unusedButton.css('opacity','1');
            setTimeout(function(){usedButton.prop('disabled', false); usedButton.html(vote);}, 2000);
          } else {
            alert("error! :(");
          }
        });
        return false;
      });
    </script>
  </body>
</html>

Answer 1

我設法找到並解決了 500 錯誤。 問題是后端 lambda 由於其自身異常管理失敗而返回 500 狀態。

基本上，后端 lambda 無法解析從 s3 發送的消息！

來自 s3 的 post 請求已經有“body”，即 post 事件請求的完整結構：

event = {'version': '2.0', 'routeKey': 'ANY /voting', 'rawPath': '/voting', 'rawQueryString': '', 'headers': {'accept': 'application/json', 'accept-encoding': 'gzip, deflate, br', 'accept-language': 'en-US,en;q=0.9', 'content-length': '123', 'content-type': 'text/plain', 'host': '5y7dfynd34.execute-api.us-east-1.amazonaws.com', 'origin': 'http://frontend-erjan-vote.s3-website-us-east-1.amazonaws.com', 'referer': 'http://frontend-erjan-vote.s3-website-us-east-1.amazonaws.com/', 'sec-ch-ua': '"Not?A_Brand";v="8", "Chromium";v="108", "Brave";v="108"', 'sec-ch-ua-mobile': '?0', 'sec-ch-ua-platform': '"Windows"', 'sec-fetch-dest': 'empty', 'sec-fetch-mode': 'cors', 'sec-fetch-site': 'cross-site', 'sec-gpc': '1',
                                                                                                                  'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36', 'x-amzn-trace-id': 'Root=1-63ba8b86-3f15fd0a56aa19646ed508da', 'x-forwarded-for': '164.40.37.179', 'x-forwarded-port': '443', 'x-forwarded-proto': 'https'}, 'requestContext': {'accountId': '025416187662', 'apiId': '5y7dfynd34', 'domainName': '5y7dfynd34.execute-api.us-east-1.amazonaws.com', 'domainPrefix': '5y7dfynd34', 'http': {'method': 'POST', 'path': '/voting', 'protocol': 'HTTP/1.1', 'sourceIp': '164.40.37.179', 'userAgent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36'}, 'requestId': 'eaq8-gtAoAMEbkw=', 'routeKey': 'ANY /voting', 'stage': '$default', 'time': '08/Jan/2023:09:23:18 +0000', 'timeEpoch': 1673169798075}, 'body': '{"body":{"MessageAttributes":{"vote":{"Type":"String","StringValue":"a"},"voter":{"Type":"String","StringValue":"count"}}}}', 'isBase64Encoded': False}

在后端 lambda 中，我嘗試在不解析內部“正文”的情況下解析它。

我試圖解析的味精：

{
    "body": {
        "MessageAttributes": {
            "vote": {
                "Type": "String",
                "StringValue": "b"
            },
            "voter": {
                "Type": "String",
                "StringValue": "count"
            }
        }
    }
}

但它有額外的“身體”！

"body":
{
    "body": {
        "MessageAttributes": {
            "vote": {
                "Type": "String",
                "StringValue": "b"
            },
            "voter": {
                "Type": "String",
                "StringValue": "count"
            }
        }
    }
}

$.post 如何從 s3 index.html 發送請求？是獲取還是發布請求

問題描述

1 個解決方案

解決方案1
0 已采納 2023-01-08 10:08:57

$.post 如何從 s3 index.html 發送請求？ 是獲取還是發布請求

問題描述

1 個解決方案

解決方案1 0 已采納 2023-01-08 10:08:57

$.post 如何從 s3 index.html 發送請求？是獲取還是發布請求

解決方案1
0 已采納 2023-01-08 10:08:57