个人中心
gpt4 book ai didi

javascript - 如何返回JSON数据类似于XML从数据库asp.net返回数据的方式

转载 作者：行者123 更新时间：2023-11-27 23:58:40 26 4
gpt4 key购买 nike

我对 ASP.NET 和 Angular.js 也很陌生。我在 lynda.com 上学习了有关 asp.net 4.5 的类(class)。在类(class)中，我们学习如何使用 asp.net api，但在类(class)中，我们使用 ajax 将数据返回为 JSON 并在将其绑定(bind)到页面之前对其进行格式化。我想使用 angular.js 显示数据库中的数据。我只想要一个简单的示例，这样我就可以使用返回的数据开始更多地使用 Angular 。这是 html...

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ApiClient.aspx.cs" Inherits="ExploreCalifornia.API.ApiClient" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Explore California Tours</title>
</head>
<body ng-app="myApp" ng-controller="myCon">
    <form id="form1" runat="server">
    <div id="tours">
    <table>
        <tr ng-repeat="x in tours">
            <td>{{ x.Name }}</td>
            <td>{{ x.Rating }}</td>
        </tr>
    </table>
    </div>
    </form>


    <script src="Scripts/angular.js"></script>
    <script src="Scripts/myCon.js"></script>
</body>
</html>

现在 Angular Controller ...

angular.module('myApp', [])
.controller('myCon', function ($scope, $http) {
    $http.get("/api/tour").success(function (data, status, headers, config) {
        $scope.Tours = data.Tour;
    }).error(function (data, status, headers, config) {
        $scope.title = "Oops... something went wrong";

    });
});

这里是返回数据的 web.apitourController 代码...

// GET api/Tour
public IQueryable<Tour> GetTours()
{
    return db.Tours;
}

这是在浏览器中调用 api/tour 时返回数据的方式...

<Tour>
<Description>Majestic tour of the coast</Description>
<Id>1</Id>
<IncludesMeals>true</IncludesMeals>
<Length>3</Length>
<Name>Big Sur Retreat</Name>
<Price>750.00</Price>
<Rating>Medium</Rating>
</Tour>
<Tour>
<Description>Day trip hike</Description>
<Id>4</Id>
<IncludesMeals>false</IncludesMeals>
<Length>1</Length>
<Name>Channel Islands Excursion</Name>
<Price>150.00</Price>
<Rating>Easy</Rating>
</Tour>
<Tour>
<Description>
Challenging tour of the hottest place in North America
</Description>
<Id>5</Id>
<IncludesMeals>true</IncludesMeals>
<Length>2</Length>
<Name>Death Valley Survivor's Trek</Name>
<Price>250.00</Price>
<Rating>Difficult</Rating>
</Tour>
<Tour>
<Description>Majestic tour of the coast</Description>
<Id>6</Id>
<IncludesMeals>true</IncludesMeals>
<Length>3</Length>
<Name>MODIFIED Brand New Tour</Name>
<Price>750.00</Price>
<Rating>Medium</Rating>
</Tour>
<Tour>
<Description>Created with HttpClient</Description>
<Id>7</Id>
<IncludesMeals>true</IncludesMeals>
<Length>10</Length>
<Name>.NET Client Tour</Name>
<Price>500.00</Price>
<Rating>Easy</Rating>
</Tour>
<Tour>
<Description>Created with HttpClient</Description>
<Id>8</Id>
<IncludesMeals>true</IncludesMeals>
<Length>10</Length>
<Name>.NET Client Tour</Name>
<Price>500.00</Price>
<Rating>Easy</Rating>
</Tour>
<Tour>
<Description>Created with HttpClient</Description>
<Id>9</Id>
<IncludesMeals>true</IncludesMeals>
<Length>10</Length>
<Name>.NET Client Tour</Name>
<Price>500.00</Price>
<Rating>Easy</Rating>
</Tour>
<Tour>
<Description>Created with HttpClient</Description>
<Id>10</Id>
<IncludesMeals>true</IncludesMeals>
<Length>10</Length>
<Name>.NET Client Tour</Name>
<Price>500.00</Price>
<Rating>Easy</Rating>
</Tour>
<Tour>
<Description>Created with HttpClient</Description>
<Id>11</Id>
<IncludesMeals>true</IncludesMeals>
<Length>10</Length>
<Name>.NET Client Tour</Name>
<Price>500.00</Price>
<Rating>Easy</Rating>
</Tour>
<Tour>
<Description>Created with HttpClient</Description>
<Id>12</Id>
<IncludesMeals>true</IncludesMeals>
<Length>10</Length>
<Name>.NET Client Tour</Name>
<Price>500.00</Price>
<Rating>Easy</Rating>
</Tour>
<Tour>
<Description>Created with HttpClient</Description>
<Id>13</Id>
<IncludesMeals>true</IncludesMeals>
<Length>10</Length>
<Name>.NET Client Tour</Name>
<Price>500.00</Price>
<Rating>Easy</Rating>
</Tour>
<Tour>
<Description>Created with HttpClient</Description>
<Id>14</Id>
<IncludesMeals>true</IncludesMeals>
<Length>10</Length>
<Name>.NET Client Tour</Name>
<Price>500.00</Price>
<Rating>Easy</Rating>
</Tour>
<Tour>
<Description>Created with HttpClient</Description>
<Id>15</Id>
<IncludesMeals>true</IncludesMeals>
<Length>10</Length>
<Name>.NET Client Tour</Name>
<Price>500.00</Price>
<Rating>Easy</Rating>
</Tour>
<Tour>
<Description>Created with HttpClient</Description>
<Id>16</Id>
<IncludesMeals>true</IncludesMeals>
<Length>10</Length>
<Name>.NET Client Tour</Name>
<Price>500.00</Price>
<Rating>Easy</Rating>
</Tour>
<Tour>
<Description>Created with HttpClient</Description>
<Id>17</Id>
<IncludesMeals>true</IncludesMeals>
<Length>10</Length>
<Name>.NET Client Tour</Name>
<Price>500.00</Price>
<Rating>Easy</Rating>
</Tour>
<Tour>
<Description>Created with HttpClient</Description>
<Id>18</Id>
<IncludesMeals>true</IncludesMeals>
<Length>10</Length>
<Name>.NET Client Tour</Name>
<Price>500.00</Price>
<Rating>Easy</Rating>
</Tour>
<Tour>
<Description>Created with HttpClient</Description>
<Id>19</Id>
<IncludesMeals>true</IncludesMeals>
<Length>10</Length>
<Name>.NET Client Tour</Name>
<Price>500.00</Price>
<Rating>Easy</Rating>
</Tour>
<Tour>
<Description>Created with HttpClient</Description>
<Id>20</Id>
<IncludesMeals>true</IncludesMeals>
<Length>10</Length>
<Name>.NET Client Tour</Name>
<Price>500.00</Price>
<Rating>Easy</Rating>
</Tour>
</ArrayOfTour>

最后...这是我在 chrome 中得到的响应...

[{"Id":1,"Name":"Big Sur Retreat","Description":"Majestic tour of the coast","Length":3,"Price":750.00,"Rating":"Medium","IncludesMeals":true},{"Id":4,"Name":"Channel Islands Excursion","Description":"Day trip hike","Length":1,"Price":150.00,"Rating":"Easy","IncludesMeals":false},{"Id":5,"Name":"Death Valley Survivor's Trek","Description":"Challenging tour of the hottest place in North America","Length":2,"Price":250.00,"Rating":"Difficult","IncludesMeals":true},{"Id":6,"Name":"MODIFIED Brand New Tour","Description":"Majestic tour of the coast","Length":3,"Price":750.00,"Rating":"Medium","IncludesMeals":true},{"Id":7,"Name":".NET Client Tour","Description":"Created with HttpClient","Length":10,"Price":500.00,"Rating":"Easy","IncludesMeals":true},{"Id":8,"Name":".NET Client Tour","Description":"Created with HttpClient","Length":10,"Price":500.00,"Rating":"Easy","IncludesMeals":true},{"Id":9,"Name":".NET Client Tour","Description":"Created with HttpClient","Length":10,"Price":500.00,"Rating":"Easy","IncludesMeals":true},{"Id":10,"Name":".NET Client Tour","Description":"Created with HttpClient","Length":10,"Price":500.00,"Rating":"Easy","IncludesMeals":true},{"Id":11,"Name":".NET Client Tour","Description":"Created with HttpClient","Length":10,"Price":500.00,"Rating":"Easy","IncludesMeals":true},{"Id":12,"Name":".NET Client Tour","Description":"Created with HttpClient","Length":10,"Price":500.00,"Rating":"Easy","IncludesMeals":true},{"Id":13,"Name":".NET Client Tour","Description":"Created with HttpClient","Length":10,"Price":500.00,"Rating":"Easy","IncludesMeals":true},{"Id":14,"Name":".NET Client Tour","Description":"Created with HttpClient","Length":10,"Price":500.00,"Rating":"Easy","IncludesMeals":true},{"Id":15,"Name":".NET Client Tour","Description":"Created with HttpClient","Length":10,"Price":500.00,"Rating":"Easy","IncludesMeals":true}]

为什么这个 Json 不像 XML 数据那样返回，以便我可以在 Angular 中调用 (data.tour) 并使用网页上的数据？这里变得非常复杂，还是有一个简单的方法来做到这一点？我想我需要它返回与此类似的结果才能清楚......

{"tour": [{"Id":1,"Name":"Big Sur Retreat","Description":"Majestic tour of the coast","Length":3,"Price":750.00,"Rating":"Medium","IncludesMeals":true}]}

现在，如果它像这样返回，我的代码应该可以正常工作。有什么想法吗？

最佳答案

您不需要将其作为 XML 获取，您已经获得了有效的 JSON，您可以像这样使用它:请参阅此工作 fiddle

只需将数据对象替换为您从 http 调用中获取的数据对象即可。

<div ng-controller="myCon">
    <form id="form1" runat="server">
        <div id="tours">
        <table>
            <tr ng-repeat="x in tours">
                <td>{{ x.Name }}</td>
                <td>{{ x.Rating }}</td>
            </tr>
        </table>
        </div>
    </form>
</div>


angular.module('myApp',[]).controller("myCon", MyCtrl);

function MyCtrl($scope) {
    var data = [
    {
        "Id": 1,
        "Name": "Big Sur Retreat",
        "Description": "Majestic tour of the coast",
        "Length": 3,
        "Price": 750,
        "Rating": "Medium",
        "IncludesMeals": true
    },
    {
        "Id": 4,
        "Name": "Channel Islands Excursion",
        "Description": "Day trip hike",
        "Length": 1,
        "Price": 150,
        "Rating": "Easy",
        "IncludesMeals": false
    },
    {
        "Id": 5,
        "Name": "Death Valley Survivor's Trek",
        "Description": "Challenging tour of the hottest place in North America",
        "Length": 2,
        "Price": 250,
        "Rating": "Difficult",
        "IncludesMeals": true
    },
    {
        "Id": 6,
        "Name": "MODIFIED Brand New Tour",
        "Description": "Majestic tour of the coast",
        "Length": 3,
        "Price": 750,
        "Rating": "Medium",
        "IncludesMeals": true
    },
    {
        "Id": 7,
        "Name": ".NET Client Tour",
        "Description": "Created with HttpClient",
        "Length": 10,
        "Price": 500,
        "Rating": "Easy",
        "IncludesMeals": true
    },
    {
        "Id": 8,
        "Name": ".NET Client Tour",
        "Description": "Created with HttpClient",
        "Length": 10,
        "Price": 500,
        "Rating": "Easy",
        "IncludesMeals": true
    },
    {
        "Id": 9,
        "Name": ".NET Client Tour",
        "Description": "Created with HttpClient",
        "Length": 10,
        "Price": 500,
        "Rating": "Easy",
        "IncludesMeals": true
    },
    {
        "Id": 10,
        "Name": ".NET Client Tour",
        "Description": "Created with HttpClient",
        "Length": 10,
        "Price": 500,
        "Rating": "Easy",
        "IncludesMeals": true
    },
    {
        "Id": 11,
        "Name": ".NET Client Tour",
        "Description": "Created with HttpClient",
        "Length": 10,
        "Price": 500,
        "Rating": "Easy",
        "IncludesMeals": true
    },
    {
        "Id": 12,
        "Name": ".NET Client Tour",
        "Description": "Created with HttpClient",
        "Length": 10,
        "Price": 500,
        "Rating": "Easy",
        "IncludesMeals": true
    },
    {
        "Id": 13,
        "Name": ".NET Client Tour",
        "Description": "Created with HttpClient",
        "Length": 10,
        "Price": 500,
        "Rating": "Easy",
        "IncludesMeals": true
    },
    {
        "Id": 14,
        "Name": ".NET Client Tour",
        "Description": "Created with HttpClient",
        "Length": 10,
        "Price": 500,
        "Rating": "Easy",
        "IncludesMeals": true
    },
    {
        "Id": 15,
        "Name": ".NET Client Tour",
        "Description": "Created with HttpClient",
        "Length": 10,
        "Price": 500,
        "Rating": "Easy",
        "IncludesMeals": true
    }
];
    $scope.tours = data;

}

关于javascript - 如何返回JSON数据类似于XML从数据库asp.net返回数据的方式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32032645/

26 4 0
文章推荐： javascript - 为什么有些网页都是用javascript渲染的？
文章推荐： javascript - 使十六进制颜色变亮或变暗
文章推荐： javascript - 使文本框在 tr(row) 单击时可见，并在 DIV 中单击按钮时打印相同的数据
文章推荐： javascript - 单击文本框时，selectRow 复选框功能不起作用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com