简体   繁体   English

按钮单击以首先在 ibm mobile 中显示来自 mysql 的表

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

I am in process of learning so kindly help me to do how the retrieval of table from mysql in ibm mobile first by just clicking an button from my html page.我正在学习,所以请帮助我首先通过单击我的 html 页面上的按钮来帮助我在 ibm mobile 中从 mysql 中检索表。 I have tried but not working help please我已经尝试过但没有工作请帮助

<!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>

My main.js我的 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");
}

You have a button in your HTML:你的 HTML 中有一个按钮:

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

You handle this button in wlCommonInit() :你在wlCommonInit()处理这个按钮:

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

In loadSQLRecords() you call an adapter procedure to retrieve data from the database.loadSQLRecords()您调用一个适配器过程来从数据库中检索数据。 If this operation succeeds then it calls the loadSQLQuerySuccess callback function.如果此操作成功,则调用loadSQLQuerySuccess回调函数。

It is this function that you are supposed to handle the display of the response from the backend (your database).您应该使用此函数处理来自后端(您的数据库)的响应的显示。 But what are you doing?但是你在做什么? You only print to the console the response.您只将响应打印到控制台。 You do not handle at all, displaying it in the application - in the HTML.您根本不处理,将其显示在应用程序中 - 在 HTML 中。

So in your HTML, you need to prepare a place holder that you will append the result into.因此,在您的 HTML 中,您需要准备一个占位符,将结果附加到其中。 For example: <table id="mytable"></table>例如: <table id="mytable"></table>

Then you need to populate the table with the data...然后你需要用数据填充表......

So in loadSQLQuerySuccess , you could for example do the following... this is where you need to learn HTML and JavaScript to accomplish what YOU want it to look like :因此,在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>");   
    }
}

Note that you need to create your own code in the for loop to make it look like how you want it to look, and of course append your own properties from the database, instead of "firstName" and "lastName".请注意,您需要在 for 循环中创建自己的代码以使其看起来像您希望的样子,当然还需要从数据库中附加您自己的属性,而不是“firstName”和“lastName”。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM