Read Data by HTML(jQuery)

First, define Table on Database. (See Step 2 on Quick Start Guide about how to do it)

Define Table ItemInfo like this. (This is as same as the sample of "Read Data from Simple One Table")

Insert some data in this table to get it in this example.

Importa Table info. (See Step 3 on Quick Start Guide about how to do it)

Next, define function. It's similar to "Read Data from Simple One Table" but there are some differences.

So, created function as follows.

Start Build. (See Step 5 on Quick Start Guide about how to do it)

After Build, Endpoint will be created. So, back to function page and click "View Endpoint" link.

In this example, application will be created to this Endpoint from HTML(jQuery).

Specifically, get data when loading page, then print data on page.

Source

<div id="result_area"></div>        ← Print data here after get data from Database
<script>
$(function() {
jQuery.ajax( <From here, copy from Template>
"https://dbaassandbox.matsuesoft.co.jp/?????/proxyserver-ItemInfo-GetSample7List.php",{
type: "POST",
dataType: 'json',
contentType: 'application/json',
data: JSON.stringify({
"TOKEN": "??????"
}),
success: function(json_result){
if (json_result._status == "OK") {
// Success
for (var i = 0; i < json_result.Result.length; i++) { ← Result is Array. $("#result_area").append(
"Item Code: " + json_result.Result[i]["ItemCode"] + "<br>" +
"Item Name: " + json_result.Result[i]["ItemName"] + "<br>" +
"Item Description: " + json_result.Result[i]["ItemDescription"] + "<br><br>");
}


} else {
// Failed
alert("Failed");
}
},
error : function() {
// Internal Error
alert("Internal Error");
},
complete: function() {
}
}
); <Until here, copy from Template>
});
</script>

Execute it, then Result is displayed as follows.

Most of the sending script is as same as template written in Endpoint page.

As you can see, only need is Client side only to write code. Only setting on Cloud is required on Server side.

By doing this, you can dramatically decrease the work effort to develop application.

Back to top

LoginLogin with this Site's User Name (ID)
Quick Login:Quick Login by Facebook ID (Keep Login Option:ON) / Newly Register


Inquiry

© 2016-2024 Matsuesoft Corporation