こちらのプログラムを改造してみました。
Web ページから、AWS Lambda の関数に引数付きでアクセスする
html と js のみを変更しました。
実行例
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="cors.js"></script>
<title>AWS API Gateway</title>
</head>
<body>
<p>aa: <input type="text" name="aa" id="aa"></p>
<p>bb: <input type="text" name="bb" id="bb"></p>
<p>cc: <input type="text" name="cc" id="cc"></p>
<p><input type="button" value="計算" id="calc"></p>
<div id="answer">answer</div>
<hr />
<div id="outarea_aa">outarea_aa</div>
<div id="outarea_bb">outarea_bb</div>
<div id="outarea_cc">outarea_cc</div>
<div id="outarea_dd">outarea_dd</div>
<div id="outarea_ee">outarea_ee</div>
<div id="outarea_ff">outarea_ff</div>
<div id="outarea_gg">outarea_gg</div>
<div id="outarea_hh">outarea_hh</div>
<hr />
Version: Sep/25/2021 PM 14:19<br />
</body>
</html>
cors.js
// -----------------------------------------------------------------------
//
// cors.js
//
// Oct/20/2017
//
// -----------------------------------------------------------------------
jQuery (function ()
{
jQuery("#outarea_aa").text ("*** cors.js *** start *** PM 18:28")
jQuery ("#calc").click (function ()
{
jQuery("#outarea_bb").text ("*** cors.js *** clicked ***")
const aa = jQuery("#aa").val()
const bb = jQuery("#bb").val()
const cc = jQuery("#cc").val()
var str_out = ""
str_out += "aa = " + aa + "<br />"
str_out += "bb = " + bb + "<br />"
str_out += "cc = " + cc + "<br />"
jQuery("#outarea_cc").html (str_out)
sum_up_proc(aa,bb,cc)
})
jQuery("#outarea_hh").text ("*** cors.js *** end ***")
})
// -----------------------------------------------------------------------
function sum_up_proc(aa,bb,cc)
{
const url = "https://bbc2fbufm6.execute-api.ap-northeast-1.amazonaws.com/test"
const params = {'aa': aa,'bb': bb,'cc': cc}
const args = JSON.stringify(params)
jQuery.post(url,args,function(res)
{
const sum = res.sum
var str_out = ""
str_out += "aa = " + params['aa'] + "<br />"
str_out += "bb = " + params['bb'] + "<br />"
str_out += "cc = " + params['cc'] + "<br />"
str_out += "sum = " + sum + "<br />"
jQuery("#answer").html (str_out)
})
}
// -----------------------------------------------------------------------