我有一个现有的数据库,我必须向用户显示工作灯应用程序中的图像列表,以便他们可以选择并添加到购物车。
数据库中的图像列在服务器上仅具有图像路径。即“内存/toppings/nuts/hazelnuts.jpg”“内存/toppings/nuts/macadamia_nuts.jpg”
因此如何获取所有这些图像并显示在我的worklight应用程序中。
从数据库中检索服务器URL和图像路径后,应该做的是将其连接起来。
可以说我在数据库中存储了以下内容:“ / uploads / original / 6/63935 / 1570735-master_chief.jpg”,因此连接方式如下:
var url = "http://static.comicvine.com" + response.invocationResult.resultSet[0].profileimg;
$("#img1").attr("src", url);
下面是一个工作示例。
单击按钮后,将调用SQL适配器过程并返回存储在数据库中的URL。此URL插入到预先存在的img
标记的src
属性中,然后显示。
您需要采用此实现并对其进行更改以适合您的需求。
HTML:
<input type="button" value="insert image" onclick="getImageURL();"/><br>
<img id="img1" src=""/>
JS:
function getImageURL() {
var invocationData = {
adapter : 'retrieveImage',
procedure : 'retrieveImageURL',
parameters : []
};
WL.Client.invokeProcedure(invocationData,{
onSuccess : retrieveSuccess,
onFailure : retrieveFailure,
});
}
function retrieveSuccess(response) {
var url = "http://static.comicvine.com" + response.invocationResult.resultSet[0].profileimg;
$("#img1").attr("src", url);
}
function retrieveFailure() {
alert ("failure");
}
备用JS:
此代码段显示了如何将几个图像添加到动态创建的img
标签中。
function retrieveSuccess(response) {
var url, i;
for (i = 0; i < response.invocationResult.resultSet.length; i++) {
url = "http://static.comicvine.com" + response.invocationResult.resultSet[i].profileimg;
$("#imgholder").append("<li><img src='" + url + "'/></li>");
// imgholder is a UL in the HTML where the img tags will be appended to.
};
}
适配器JS:
var procedure1Statement = WL.Server.createSQLStatement("select profileimg from users");
function retrieveImageURL() {
return WL.Server.invokeSQLStatement({
preparedStatement : procedure1Statement
});
}
适配器XML:
<procedure name="retrieveImageURL"/>
在数据库中:
表(用户) | -专栏(profileimg) ------行内容:指向图像的某些URL,例如:/myimg.png
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句