单击按钮首先在 ibm 移动设备中显示来自 mysql 的 table

Question

我正在学习，请帮助我首先在 ibm Mobile 中从 mysql 检索 table，只需单击我的 html 页面上的一个按钮。我已经试过了但没有工作请帮助

<!DOCTYPE HTML>
<html>
        <head>
            <meta charset="UTF-8">
            <title>vikdemodb</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
            <!--
                <link rel="shortcut icon" href="images/favicon.png">
                <link rel="apple-touch-icon" href="images/apple-touch-icon.png"> 
            -->
            <link rel="stylesheet" href="css/main.css">
            <script>window.$ = window.jQuery = WLJQ;</script>
        </head>
        <body style="display: none;">
            <!--application UI goes here-->
            <div id="header">
            <h1>database Demo</h1>
        </div>          
        <div id="wrapper">
            <input type="button" id="databasecon" value="click me to get data from db" /><br />

        </div>          

            <script src="js/initOptions.js"></script>
            <script src="js/main.js"></script>
            <script src="js/messages.js"></script>
        </body>
</html>

我的main.js

function wlCommonInit(){



        $('#databasecon').click(loadSQLRecords);


}
function loadSQLRecords(){
    var invocationData = {
        adapter : 'vikadap',
        procedure : 'getstudinfo',
        parameters : []
    };

    WL.Client.invokeProcedure(invocationData,{
        onSuccess : loadSQLQuerySuccess,
        onFailure : loadSQLQueryFailure
    });
}

function loadSQLQuerySuccess(result){

    window.alert("success");
    console.log("Retrieve success" + result);
    console.log(result.invocationResult.resultSet); 
}

function loadSQLQueryFailure(result){
    WL.Logger.error("Retrieve failure");
}

Answer 1

您的 HTML 中有一个按钮：

<input type="button" id="databasecon" value="click me to get data from db" />

您在 wlCommonInit() 中处理此按钮：

$('#databasecon').click(loadSQLRecords);

在 loadSQLRecords() 中，您调用一个适配器过程从数据库中检索数据。如果此操作成功，则它调用 loadSQLQuerySuccess 回调函数。

您应该使用此函数来处理来自后端（您的数据库）的响应显示。但是你在做什么？您只需将响应打印到控制台。您根本不处理，在应用程序中显示它 - 在 HTML.

因此，在您的 HTML 中，您需要准备一个占位符，您将在其中附加结果。例如：<table id="mytable"></table>

然后您需要用数据填充 table...

因此在 loadSQLQuerySuccess 中，您可以执行以下操作... 这是您需要学习 HTML 和 JavaScript 以完成您的任务的地方想让它看起来像:

function loadFeedsSuccess(result) {
    if (result.invocationResult.resultSet.length > 0) 
        displayFeeds(result.invocationResult.resultSet);
    else 
        loadFeedsFailure();
}

function loadFeedsFailure() {
    alert ("failure");
}

function displayFeeds(result) {
    for (var i = 0; i < result.length; i++) {
        $("#mytable").append("<tr><td>" + result[i].firstName + "</td></tr>");
        $("#mytable").append("<tr><td>" + result[i].lastName + "</td></tr>");   
    }
}

请注意，您需要在 for 循环中创建自己的代码，使其看起来像您想要的样子，当然还要从数据库中附加您自己的属性, 而不是 "firstName" 和 "lastName".

单击按钮首先在 ibm 移动设备中显示来自 mysql 的 table

Button click to display a table from mysql in ibm mobile first

ibm-mobilefirst

mobilefirst-adapters