Angular Js初学者Ajax Call

时间:2016-04-19 05:03:22

标签: javascript jquery angularjs ajax

我是angular js的新手,在我的控制器里面。我是我的应用程序的控制器,100%正常工作。我遇到的问题是如何使用角度js进行ajax调用。我尝试从我的服务中获取数据并使用此ajax将其传递给我的index.html。当我尝试调试代码时,它只会在$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){

    });

4 个答案:

答案 0 :(得分:1)

在成功和错误回调上标记断点。

$ http 是一项服务。您在其参数中传递了所需的数据。

$http({})
       ^options

在调用此$ http之后,它将执行该工作,并异步地向提供的URL发送请求。但是你不需要调试那部分。

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

答案 1 :(得分:1)

由于您已经在使用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'}
})

另外我建议您使用Angular方式而不是使用jQuery。你甚至可能喜欢它;)

答案 2 :(得分:1)

首先是:您只需使用$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() - 当您通过{{1}将某些html推送到DOM时,这是必需的} - 或者它只显示带有标签的代码。您必须在控制器定义中注入 $http

答案 3 :(得分:0)

在调用ajax之前放这行,这对我有用希望

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

这也是在https://docs.angularjs.org/api/ng/service/ $ http

中给出的