Ajax 调用在 angularjs 中不起作用

Posted 2023-05-09

【中文标题】Ajax 调用在 angularjs 中不起作用

【英文标题】：Ajax call is not working in 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 来更新它。请检查这个...***.com/questions/22209117/…

【参考方案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) 

    );