More than 3 years have passed since last update.

API Geteway と Lambda の使い方

Last updated at 2021-09-25Posted at 2021-09-25

こちらのプログラムを改造してみました。
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)
        })

}

// -----------------------------------------------------------------------

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up