繁体   English   中英

Angular JS应用程序POST.Success不是Wcf REST服务的功能

[英]Angular JS Application POST.Success Is Not a Function with Wcf REST Service

我正在使用wcf服务到Angular Js Application。 我正在根据输入字段上的文本从sql数据库中检索记录列表,但是当我输入输入字段的编号并单击搜索按钮时。 我在控制台窗口的Google Chorme中遇到以下错误。

angular.js:14642 TypeError: post.success is not a function
    at b.$scope.Search (Search.js:13)
    at fn (eval at compile (angular.js:15500), <anonymous>:4:138)
    at e (angular.js:27285)
    at b.$eval (angular.js:18372)
    at b.$apply (angular.js:18472)
    at HTMLInputElement.<anonymous> (angular.js:27290)
    at kg (angular.js:3771)
    at HTMLInputElement.d (angular.js:3759)

这是接口..

  [OperationContract]
        string GetCustomers(string prefix);

这是实现。

public string GetCustomers(string prefix)
{
    List<object> customers = new List<object>();
    string sql = "SELECT * FROM Current_Account_Details WHERE Account_Number LIKE @prefix + '%'";
    using (SqlConnection conn = new SqlConnection())
    {
        conn.ConnectionString = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
        using (SqlCommand cmd = new SqlCommand(sql))
        {
            cmd.Parameters.AddWithValue("@prefix", prefix);
            cmd.Connection = conn;
            conn.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    customers.Add(new
                    {
                        Account_Number = sdr["Account_Number"],
                        Account_Creation_Date = sdr["Account_Creation_Date"],
                        Account_Type = sdr["Account_Type"],
                        Branch_Sort_Code = sdr["Branch_Sort_Code"],
                        Account_Fees = sdr["Account_Fees"],
                        Account_Balance = sdr["Account_Balance"],
                        Over_Draft_Limit = sdr["Over_Draft_Limit"]


                    });
                }
            }
            conn.Close();
        }
        return (new JavaScriptSerializer().Serialize(customers));
    }
}

这是脚本代码。

var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $http, $window) {
    $scope.IsVisible = false;
    $scope.Search = function () {
        var post = $http({
            method: "POST",
            url: "http://localhost:52098/HalifaxIISService.svc/GetCustomers",
            dataType: 'json',
            data: { prefix: $scope.Prefix },
            headers: { "Content-Type": "application/json" }
        });

        post.success(function (data, status) {
            $scope.Customers = eval(data.d);
            $scope.IsVisible = true;
        });

        post.error(function (data, status) {
            $window.alert(data.Message);
        });
    }
});

这是html代码。

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Search</title>
    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/RegistrationScript/Search.js"></script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        Name:
        <input type="text" ng-model="Prefix" />
        <input type="button" value="Submit" ng-click="Search()" />
        <hr />
        <table cellpadding="0" cellspacing="0" ng-show="IsVisible">
            <tr>
                <th> Account Number</th>
                <th>Account Creation date</th>
                <th>Account Type</th>
                <th> Sort code</th>
                <th>Account Fee</th>
                <th>Account Balance</th>
                <th>Overdraft Limit</th>


            </tr>
            <tbody ng-repeat="m in Customers">
                <tr>
                    <td>{{m.Account_Number}}</td>
                    <td>{{m.Account_Creation_Date}}</td>
                    <td>{{m.Account_Type}}</td>

                    <td>{{m.Branch_Sort_Code}}</td>
                    <td>{{m.Account_Fees}}</td>
                    <td>{{m.Account_Balance}}</td>
                    <td>{{m.Over_Draft_Limit}}</td>

                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

这是我运行应用程序时的屏幕截图。 点击这里查看结果

角度为1.4及更高版本时,不再存在successerror 相反,您应该使用。 then.catch.

 $scope.Search = function () {
        var post = $http({
            method: "POST",
            url: "http://localhost:52098/HalifaxIISService.svc/GetCustomers",
            dataType: 'json',
            data: { prefix: $scope.Prefix },
            headers: { "Content-Type": "application/json" }
        }).then(function(success) {
            return genericSuccess(success);
        });        
    };
    function genericSuccess(data) {
            $scope.Customers = eval(data.d);
            $scope.IsVisible = true;
    }); 

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM