如何在 nativescript javascript 中从远程 php 检索多个数据？

Question

我正在尝试从我的远程 php 文件中检索多个数据并动态显示它们，我通常在编写 cordova 时使用 jquery 来执行此操作。我现在正在使用nativescript。这是我之前使用的 jquery 代码

$.getJSON(serviceURL + 'getroutes.php?station='+station, function(data) {

        employees = data.items;

        $.each(employees, function(index, employee) {

            $('#employeeList').append('<li>'+

                    '<img src="js/citybus.png" class="list-icon"/>' +

                    '<p class="line1">' + employee.firstName + '</p>' +

                    '<p class="line2">' + difference + ' Out' + '</p>' +

                    '<p class="line3" style="color:'+ color +';margin-left:60px">' + SeatsLeft + ' seats left </p>' +

                    '<button style="display:'+ display +'" class="bubble" data-difference="' + hoursMin + '" data-route="' + employee.firstName + '" data-busnum="' + employee.lastName + '" onclick="bookSeat(this);">' + '<center><img src="js/seat.jpg" style="height:15px;width:15px;"/></center>' + '</button>'

                    + '<button data-id="' + employee.id + '" data-diff="' + hoursMin + '" data-name="' + employee.firstName + '" class="bubble" style="margin-right:30px" onclick="setReminder(this);">' + '<center><img src="js/bell.png" style="height:15px;width:15px;"/></center>' + '</button></li>');

            if(index && index % 4 === 0) {

                $('#employeeList').append('<center><div class="adSpace2" style="margin-top:2.5px;margin-bottom:2.5px;">'+'</div></center>');

            }

        });

        setTimeout(function(){

            scroll.refresh();

        });

    });

请问我如何用nativescript做到这一点？

Answer 1

您需要使用Fetch API。const Observable = require('tns-core-modules/data/observable').Observableconst model = new Observable()function loaded(args) {&nbsp; &nbsp; args.object.bindingContext = model&nbsp; &nbsp; fetch(serviceURL + 'getroutes.php?station='+station).then(res => model.set('employees', res.items))}exports.loaded = loaded然后在您的视图 XML 中：<Page xmlns="http://www.nativescript.org/tns.xsd" xmlns:lv="nativescript-ui-listview" aloaded="loaded">&nbsp; &nbsp; <StackLayout>&nbsp; &nbsp; &nbsp; &nbsp; <ListView items="{{employees}}">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Label class="line1" text="{{firstName}}" />&nbsp; &nbsp; &nbsp; &nbsp; </ListView>&nbsp; &nbsp; </StackLayout></Page>