Angular Js beginner Ajax Call

Question

Я новичок в угловых js, внутри моего контроллера.js есть контроллеры для моего приложения, что на 100% работает. У меня проблема: как сделать вызов ajax с помощью угловых js. Я пытаюсь извлечь данные из моего сервиса и передать его в свой index.html, используя этот ajax. Когда я пытаюсь отладить код, он попадает только на $http, но не проходит через код внутри него. Что я здесь делаю неправильно?

$http({ 
     method: 'POST', 
     url: 'http://someService.site.net/site.aspx', 
     data:{action:'someAction', position:'founders'}, 
     headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
    }).then(function successCallback(response){ 

     var json =jQuery.parseJSON(response); 
     var htmldata=""; 
     for(i=0; i<json.length; i++) 
     { 
      var htmlInfo = '<li><div class=\'col\'><a href="'+ json[i].Id +'"><img width=\'100%\' height=\'auto\' src="'+json[i].Image + '" class=\'profile-img\' /><h3>' +json[i].Name+'</h3><p>'+json[i].Title+'</p></a></div></li>'; 

      htmldata+= htmlInfo; 
     } 
     jQuery("#vflist").html(htmldata); 
    }, function errorCallback(response){ 

    }); 

Answer 1

Отметить ваши контрольные точки успеха и обратные вызовы ошибок.

$ http - это сервис. Вы передали требуемые данные в свой параметр.

$http({}) 
     ^options 

После того, как он называет этот $ http, он выполнит эту работу и отправит запрос на предоставленный url асинхронно. Но вам не нужно отлаживать эту часть.

$http({options}) 
    .then(function(data){ 
     // mark 1 breakpoint here 
    }, function(data){ 
     // mark another breakpoint here 
    }) 

Answer 2

Поскольку вы уже используете JQuery вместе с Angularjs Я бы порекомендовал вам использовать $ .params() для кодирования данных параметров. Вашего $ HTTP будет как

$http({ 
    method: 'POST', 
    url: 'http://someService.site.net/site.aspx', 
    data:$.params({action:'someAction', position:'founders'}), 
    headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
}) 

Кроме того, я предлагаю вам использовать угловой способ делать вещи, а не с помощью JQuery. Вы могли бы даже нравится;)

Answer 3

Первая вещь: вы можете просто использовать $http функцию как это:

var config = { 
    headers : { 
     'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;' 
}}; 

$http.post('http://someService.site.net/site.aspx', 
      {action:'someAction', position:'founders'}, 
      config) 
    .success(function(response) { 
     var json =jQuery.parseJSON(response); 
     var htmldata=""; 
     for(i=0; i<json.length; i++) { 
      var htmlInfo = '<li><div class=\'col\'><a href="'+ json[i].Id +'"><img width=\'100%\' height=\'auto\' src="'+json[i].Image + '" class=\'profile-img\' /><h3>' +json[i].Name+'</h3><p>'+json[i].Title+'</p></a></div></li>'; 

      htmldata+= htmlInfo; 
     } 
     jQuery("#vflist").html($sce.trustAsHtml(htmldata)); 
    }) 
    .error(function(data, status, headers, config) { 
      console.log(status); 
    }); 

Во-вторых, как вы можете увидеть в приведенном выше коде я использовал $sce.trustAsHtml() - это требуется, когда вы нажимаете некоторый html на DOM через $http - или он просто покажет коды с тегами. У вас должно быть inject$sce в определении контроллера.

Answer 4

поставить эту строку перед вызовом Ajax это работает для меня, надеюсь, что для вас

$http.defaults.headers.common.Authorization = 'Basic YmVlcDpib29w'; 
// YmVlcDpib29w you can put any string 

Это также дается не- https://docs.angularjs.org/api/ng/service/ $ HTTP