ajax request in angular js application not working in google chrome

Question

I'm working on an angular js application. I have loaded jquery and I'm using some jquery methods in this application. My problem is $.ajax. It's working in Firefox and IE, but has problem in google chrome! Google chrome always shows Failed to load response data error in my ajax request. Even if I send ajax request manually with XMLHttpRequest()(without jquery), I still see this error message in the chrome console. I don't know what's the problem and how can I solve this. Everything is perfect in firefox, even IE, but chrome has problem! Here is my ajax code:

$.ajax({
    url: "/testUrl",
    type: "post",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    headers: {
        Accept: "application/json; charset=utf-8",
        "Content-Type": "application/json; charset=utf-8"
    }
}).success(function(data) {
});

Note, I have used jquery ajax request in a non angular js application before and everything is right in google chrome, but when I switched to angular, I saw this strange problem.

httpNick · Accepted Answer · 2016-03-06 07:48:35Z

1

Using jquery with angular is bad practice. Use the angular implementation for Ajax calls $http.

See this post http://www.bennadel.com/blog/2612-using-the-http-service-in-angularjs-to-make-ajax-requests.htm

And the official docs https://docs.angularjs.org/api/ng/service/$http

edited Mar 6, 2016 at 7:48

httpNick

2,6241 gold badge24 silver badges36 bronze badges

answered Mar 6, 2016 at 6:32

Dennis Nerush

5,6935 gold badges29 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Wtower Over a year ago

I strongly disagree with your statement, not also to mention that it does not solve the OP's problem. The link that you provide is nowhere near the official documentation, which btw has got a whole page in the tutorial on how jquery can help. You just need to use jQuery in a different way than it is accustomed, and surely it should not be used in the OP's case.

RamaKrishna · Accepted Answer · 2016-03-06 08:48:55Z

0

In angular you can use build in service $http or $resource

Example:

  var data = ({
    dataType: "json", 
    headers: {
     Accept: "application/json; charset=utf-8",
    "Content-Type": "application/json; charset=utf-8"
}
    });

 $http.post('yoururl', data).success(function(data){
 console.log(data);
 });

answered Mar 6, 2016 at 8:48

RamaKrishna

2171 silver badge8 bronze badges

Collectives™ on Stack Overflow

ajax request in angular js application not working in google chrome

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related