Ajax 调用在 angularjs 中不起作用答案

【问题标题】：Ajax call is not working in angularjsAjax 调用在 angularjs 中不起作用
【发布时间】：2017-04-07 06:41:07
【问题描述】：

我正在尝试在控制器上实现 ajax 调用以获取所有学生的列表，但我没有通过单击按钮获得它我将代码放在这里请任何人帮助

  module.controller("GetController", function ($scope, $http) {
    $scope.getUser = function () {
        console.log(getUser);
            var getdata=  $.ajax({
            type: 'POST',
            url: "/GetUserDetails",
            dataType: "json",
            contentType: "application/json",
            data: '{}',
            success: function (data) {
                var parsed = $.parseJSON(data.d);
                $.each(parsed, function (i, jsondata) {
                    $("#showdata").append("ID: " + jsondata.Id + "<br/>" + "FirstName: " + jsondata.FirstName + "<br/>" + "SecondName: " + jsondata.SecondName + "<br/>" + "EmailId: " + jsondata.EmailId + "<br/>" + "Mobile: " + jsondata.Mobile);
                });
            },
            error: function (XHR, errStatus, errorThrown) {
                var err = JSON.parse(XHR.responseText);
                errorMessage = err.Message;
                console.log(errorMessage);
            }
        });
    }
});

这里是html

 <div ng-controller="GetController" id="showdata">
   <table>
       <tr>
           <td>Id</td>
           <td>FirstName</td>
           <td>SecondName</td>
           <td>EmailId</td>
           <td>Mobile</td>
       </tr>
       <tr>
           <td>{{Id}}</td>
           <td>{{FirstName}}</td>
           <td>{{SecondName}}</td>
           <td>{{EmailId}}</td>
           <td>{{Mobile}}</td>
       </tr>
   </table>       
   <input type="submit" ng-click="getUser()" value="Getdata" />

这是控制器代码

 [HttpPost]
    [Route("GetUserDetails")]
    public async Task<bool> GetUserDetails([FromBody]object obj)
    {
        return await CenterGateWay.GetStudentlist();

    }

【问题讨论】：

失败的具体情况如何？ JavaScript 控制台是否有错误？是否加载了 Angular 和 jQuery？代码是否执行？是否发出了 AJAX 请求？服务器的响应是什么？ “它不起作用”不是对问题的非常有用的描述。（另外，为什么GetStudentList 和GetUserDetails 返回bool？这似乎......误导。）
控制台没有任何错误
您以错误的方式使用 jquery 和 angular。不要在控制器中进行 DOM 操作，而仅将其推送到您使用 angular 渲染它的模型。
开发工具的网络面板中有什么？您确定收到服务器的任何响应吗？
ajax 调用正在工作（当然），但你永远不会看到 dom 更新，因为你没有使用 angularJS 来更新它。请检查这个...stackoverflow.com/questions/22209117/…

标签： c# jquery angularjs ajax

【解决方案1】：

您误用了 jquery 和 angular 的组合。永远不要在你的控制器中进行 DOM 操作，而是让 Angular 来处理它。这样的事情应该可以工作：

$scope.users = [];

$scope.getUser = function () {
    $.ajax({
        type: 'POST',
        url: "/GetUserDetails",
        dataType: "json",
        contentType: "application/json",
        data: '{}',
        success: function (data) {
            // you have to trigger the digest cycle here,
            // because you use jquery's ajax which won't automatically be
            // picked up by angular
            $scope.$apply(function(){
                $scope.users = angular.fromJson(data.d);
            });
        },
        error: function (XHR, errStatus, errorThrown) {
            var err = angular.fromJson(XHR.responseText);
            errorMessage = err.Message;
            console.log(errorMessage);
        }
    });
}

在你看来：

<table>
    <tr>
        <td>Id</td>
        <td>FirstName</td>
        <td>SecondName</td>
        <td>EmailId</td>
        <td>Mobile</td>
    </tr>
    <tr ng-repeat="user in users">
        <td>{{ user.Id }}</td>
        <td>{{ user.FirstName }}</td>
        <td>{{ user.SecondName }}</td>
        <td>{{ user.EmailId }}</td>
        <td>{{ user.Mobile }}</td>
    </tr>
</table>

更好，根本不需要使用jquery：

$scope.getUser = function () {
    $http.post("/GetUserDetails").then(function(data) {
        $scope.users = data.d;
    }, function(error) {

    });
}

【讨论】：