如何在 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').Observable

const model = new Observable()

function loaded(args) {

    args.object.bindingContext = model

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

    <StackLayout>

        <ListView items="{{employees}}">

            <Label class="line1" text="{{firstName}}" />

        </ListView>

    </StackLayout>

</Page>