SAPUI5 1.71.78老版本的消费restful服务

为了兼容老浏览器，没用Javascript的现代fetch api，用的jquery

controller.js代码如下

sap.ui.define([ "sap/ui/core/mvc/Controller", "sap/ui/model/json/JSONModel", "sap/m/MessageToast" ], function (Controller, JSONModel, MessageToast) { "use strict"; return Controller.extend("zfiori_stock.controller.StockList", { onInit: function () { // 初始化stock模型 var oStockModel = new JSONModel([]); this.getView().setModel(oStockModel, "stock"); }, /** * 重置查询条件并清空表格数据 */ _resetQuery: function () { this._clearInputs(); // 清空表格数据 var oStockModel = this.getView().getModel("stock"); oStockModel.setData({}); MessageToast.show("查询条件已重置"); }, /** * 清空所有输入框 */ _clearInputs: function () { this.getView().byId("werksInput").setValue(""); this.getView().byId("matnrInput").setValue(""); this.getView().byId("chargInput").setValue(""); this.getView().byId("lgortInput").setValue(""); }, /** * 获取库存数据 * 兼容Android 8平台的老浏览器 */ _fetchStockData: function () { // 后端API信息 var sUrl = "/api/zbakpda?ACTION=GET_STOCK"; // 从输入框获取查询条件 var oRequestData = { "werks": this.getView().byId("werksInput").getValue(), "matnr": this.getView().byId("matnrInput").getValue(), "charg": this.getView().byId("chargInput").getValue(), "lgort": this.getView().byId("lgortInput").getValue() }; // 显示加载提示 MessageToast.show("正在查询数据..."); // 使用jQuery.ajax以兼容老浏览器 jQuery.ajax({ url: sUrl, type: "POST", data: JSON.stringify(oRequestData), headers: { "Content-Type": "application/json", "Accept-Language": "zh" // "Authorization": sAuthHeader }, // 兼容老浏览器的参数设置 dataType: "json", xhrFields: { withCredentials: true }, timeout: 30000, //通过 jQuery.proxy(fn, this)，强制绑定了函数执行时的 this 上下文为当前控制器。 success: jQuery.proxy(function (oData) { // 将返回数据绑定到stock模型 var oStockModel = this.getView().getModel("stock"); if (oStockModel) { if (oData.length != 0) { MessageToast.show("库存数据获取成功"); } else { MessageToast.show("返回数据为空"); } oStockModel.setData(oData); } }, this), error: jQuery.proxy(function (xhr, status, error) { console.error("获取库存数据失败:", error); console.error("状态码:", xhr.status); // 友好的错误提示 var sErrorMessage = "获取库存数据失败"; if (xhr.status === 401) { sErrorMessage = "认证失败，请检查账号密码"; } else if (xhr.status === 404) { sErrorMessage = "服务器地址错误"; } else if (xhr.status === 500) { sErrorMessage = "服务器内部错误"; } MessageToast.show(sErrorMessage); }, this) }); } }); });

xml视图代码

<mvc:View controllerName="zfiori_stock.controller.StockList" xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc"> <Panel class="sapUiResponsiveContentPadding"> <headerToolbar> <Toolbar> <Button text="查询" press="_fetchStockData" icon="sap-icon://search" class="sapUiSmallMarginEnd" /> <Button text="重置" press="_resetQuery" icon="sap-icon://refresh" /> </Toolbar> </headerToolbar> <l:Grid defaultSpan="L6 M6 S6" class="sapUiResponsiveMargin" vSpacing="1"> <l:content> <!-- 工厂 --> <FlexBox class="sapUiTinyMarginBottom" alignItems="Center"> <Label text="工厂:" labelFor="werksInput" width="80px" /> <Input id="werksInput" width="100%" /> </FlexBox> <!-- 库存地点 --> <FlexBox class="sapUiTinyMarginBottom" alignItems="Center"> <Label text="库存地点:" labelFor="lgortInput" width="80px" /> <Input id="lgortInput" width="100%" /> </FlexBox> <!-- 物料 --> <FlexBox class="sapUiTinyMarginBottom" alignItems="Center"> <Label text="物料:" labelFor="matnrInput" width="80px" /> <Input id="matnrInput" width="100%" /> </FlexBox> <!-- 批次 --> <FlexBox class="sapUiTinyMarginBottom" alignItems="Center"> <Label text="批次:" labelFor="chargInput" width="80px" /> <Input id="chargInput" width="100%" /> </FlexBox> </l:content> </l:Grid> <Table id="stockList" class="sapUiResponsiveMargin" width="100%" items="{ path : 'stock>/' }" noDataText="暂无数据"> <columns> <Column minScreenWidth="Phone" demandPopin="true" hAlign="Left"> <Text text="物料编码" /> </Column> <Column minScreenWidth="Phone" demandPopin="true" hAlign="Left"> <Text text="物料描述" /> </Column> <Column minScreenWidth="Tablet" demandPopin="true"> <Text text="工厂" /> </Column> <Column minScreenWidth="Tablet" demandPopin="true"> <Text text="库存地点" /> </Column> <Column minScreenWidth="Tablet" demandPopin="true"> <Text text="库存地点名称" /> </Column> <Column minScreenWidth="Tablet" demandPopin="true"> <Text text="批次" /> </Column> <Column minScreenWidth="Tablet" demandPopin="true"> <Text text="库存数量" /> </Column> <Column minScreenWidth="Tablet" demandPopin="true"> <Text text="单位" /> </Column> </columns> <items> <ColumnListItem> <cells> <Text text="{stock>matnr}" /> <Text text="{stock>maktx}" /> <Text text="{stock>werks}" /> <Text text="{stock>lgort}" /> <Text text="{stock>lgobe}" /> <Text text="{stock>charg}" /> <Text text="{stock>clabs}" /> <Text text="{stock>meins}" /> </cells> </ColumnListItem> </items> </Table> </Panel> </mvc:View>

ui5.yaml配置代理，解决cors跨域

specVersion: "4.0" metadata: name: zfiori_stock type: application server: customMiddleware: - name: ui5-middleware-simpleproxy afterMiddleware: compression mountPath: /api configuration: baseUri: "http://后端ip:port" preserveHostHeader: true ignoreCertErrors: true headers: X-Requested-With: XMLHttpRequest