Javascript 我们如何使用OPENUI5/SAPUI5使用JSON数据?
我是SAPUI5/OPENUI5的新手。 我正在试用一个示例程序来使用域中的json数据,并将其显示在我的openui5表中。我尝试了两种方法来获取数据并将其绑定到表控件,但无法使用json数据生成表。 请告诉我密码中的错误。 也请参考我的一些链接,以更好地理解这个概念 提前谢谢 请找到以下两种方法: JSON数据:Javascript 我们如何使用OPENUI5/SAPUI5使用JSON数据?,javascript,json,sapui5,Javascript,Json,Sapui5,我是SAPUI5/OPENUI5的新手。 我正在试用一个示例程序来使用域中的json数据,并将其显示在我的openui5表中。我尝试了两种方法来获取数据并将其绑定到表控件,但无法使用json数据生成表。 请告诉我密码中的错误。 也请参考我的一些链接,以更好地理解这个概念 提前谢谢 请找到以下两种方法: JSON数据: [ { "name": "Rajesh" }, { "name": "Kunal Jauhari" }, { "name": "Ashi
[
{
"name": "Rajesh"
},
{
"name": "Kunal Jauhari"
},
{
"name": "Ashish Singh"
},
{
"name": "Ansuman Parhi"
},
{
"name": "Arup Kumar"
},
{
"name": "Deepak Malviya"
},
{
"name": "Seshu"
},
{
"name": "Ankush Datey"
},
{
"name": "Tapesh Syawaria"
},
{
"name": "Mahesh"
},
{
"name": "Vinay Joshi"
},
{
"name": "Ardhendu Karna"
},
{
"name": "Abhishek Shukla"
},
{
"name": "Kashim"
},
{
"name": "Vinayak"
}
]
方法1:我使用一个php文件来回显JSON数据,并在我的ui5屏幕中使用它。
当我单独访问并运行php文件时,它会生成数据并在屏幕上打印数据
我得到的错误是未调用getJSON
代码:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons,sap.ui.table"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
<script>
var json_url = "http://mydomain/teamdetails_ui5.php?t=6";
$.ajax({
url : json_url,
jsonpCallback : 'getJSON',
contentType : "application/json",
dataType: 'jsonp',
success: function(data,textStatus,jqXHR) {
oModel.setData({data: data});
sap.ui.getCore().setModel(oModel);
var oTable1 = new sap.ui.table.Table({
title : "Players List",
visibleRowCount : 3,
selectionMode : sap.ui.table.SelectionMode.Single,
navigationMode : sap.ui.table.NavigationMode.Paginator,
});
//Define the columns and the control templates to be used
oTable1.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "Player Name"
}),
template : new sap.ui.commons.TextView().bindProperty(
"text", "name"),
width : "10px"
}));
oTable1.setModel(oModel);
oTable1.bindRows("/oModel");
oTable1.placeAt('table_cont');
},
error : function(jqXHR,textStatus,errorThrown) {
alert("Oh no, an error occurred");
alert(jqXHR);
alert(textStatus);
alert(errorThrown);
}
});
</script>
</head>
<body class="sapUiBody" role="application">
<div id="table_cont"></div>
</body>
</html>
var json_url=”http://mydomain/teamdetails_ui5.php?t=6";
$.ajax({
url:json_url,
jsonpCallback:'getJSON',
contentType:“应用程序/json”,
数据类型:“jsonp”,
成功:函数(数据、文本状态、jqXHR){
setData({data:data});
sap.ui.getCore().setModel(oModel);
var oTable1=新的sap.ui.table.table({
标题:“玩家名单”,
visibleRowCount:3,
selectionMode:sap.ui.table.selectionMode.Single,
navigationMode:sap.ui.table.navigationMode.Paginator,
});
//定义要使用的列和控件模板
oTable1.addColumn(新的sap.ui.table.Column({
label:new sap.ui.commons.label({
文本:“玩家名称”
}),
模板:新建sap.ui.commons.TextView().bindProperty(
“文本”、“名称”),
宽度:“10px”
}));
oTable1.集合模型(oModel);
oTable1.bindRows(“/oModel”);
OTABLE 1.地点(‘表_cont’);
},
错误:函数(jqXHR、textStatus、errorshown){
警报(“哦,不,发生了错误”);
警报(jqXHR);
警报(文本状态);
警报(错误抛出);
}
});
方法2:我试图直接在我的域上访问JSON文件并访问数据
除url外,代码与上述相同。
此方法使用的Url是(mydomain/players.json),其中players.json包含上述json数据
请帮助我理解JSON数据处理的概念
问候,,
Rajan首先:SAPUI5构建在jQuery上,是的。但是在SAPUI5应用程序中不需要使用jQuery 使用JSONModel加载JSON数据。JSONModel还可以从URL加载数据。 请参阅 这将看起来像:
// create a "json" Model
var oModel = new sap.ui.model.json.JSONModel();
// load data from URL
oModel.loadData('http://mydomain/teamdetails_ui5.php?t=6');
之后,您可以在sap.ui.core中向以下用户注册此模型:
sap.ui.getCore().setModel(oModel);
在这一行之后,每个控件都可以通过简单的绑定语法使用此模型中的数据
现在让我们创建表:
// create your table
var oTable1 = new sap.ui.table.Table({
title : "Players List",
visibleRowCount : 3,
selectionMode : sap.ui.table.SelectionMode.Single,
navigationMode : sap.ui.table.NavigationMode.Paginator,
// bind the core-model to this table by aggregating player-Array
rows: '{/player}'
});
当心带有“行:“{/player}”的部分。这是从表中的模型获取数据所必须做的唯一事情
现在通过添加列并将表添加到DOM来完成演示:
// define the columns and the control templates to be used
oTable1.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "Player Name"
}),
template : new sap.ui.commons.TextView({
text: '{name}'
}),
width : "10px"
}));
//place at DOM
oTable1.placeAt('content');
就这样。如果它不起作用,这里有一个运行的你好,Manuel,谢谢你的时间和回复。我尝试并执行了您的演示版本。它正在工作。当我尝试从URL加载数据时,我的控制台中出现以下错误。无法加载XMLHttpRequest。请求的资源上不存在“Access Control Allow Origin”标头。因此,不允许访问源“null”。请让我知道为什么我会得到这个错误。关于这一点,RajanTo要执行AJAX请求,您需要在同一域上拥有应用程序的
teamdetails_ui5.php
和index.html
。这是浏览器的限制。另一种方法是,您可以从index.html
所在的服务器传递HTTP头“Origin:*”。这是浏览器限制。您不能将其他域中的数据作为自己的域加载。您可以使用JSONP从另一个域获取数据。看看这里:非常感谢尼古拉和曼纽尔。在将index.html放在与teamdetails_ui5.php相同的域中之后,我能够获取数据。再次感谢你们两位。