jQuery.ajax to $http

Question

I used this function

    jQuery.ajax({
        type: 'POST',
        url: urlSubmit,
        timeout: 5000,
        dataType: 'text',
        data: {
            date : dataDate,
            url : dataUrl,
            domaine : dataDomaine,
            email : dataEmail,
            destinataire : dataDestinataire,
            msg : dataMsg
        },
        "success": function (jqXHR, textStatus, errorThrown) {
            console.log("AJAX success :) - statut " + textStatus);
            $timeout(successMailZR_alerte, 3000);
        },
        "error": function (jqXHR, textStatus, errorThrown) {
            console.log("AJAX fail :/ - statut " + textStatus);
            $timeout(errorMailZR_alerte, 3000);
        }

    });

Whats the code is doing : code POST to a php script who send an email.

but, since i rewrited my code in a complete angularjs app, i do it like this :

    $http({
        method: 'POST',
        url: urlSubmit,
        timeout: 5000,
        cache: false,
        data: {
            date : dataDate,
            url : dataUrl,
            domaine : dataDomaine,
            email : dataEmail,
            destinataire : dataDestinataire,
            msg : dataMsg
        },
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        responseType: 'text',
    }).
    success(function(data, status, headers, config) {
        console.log("AJAX success :) - statut " + status);
        $timeout(successMailZR_alerte, 3000);
    }).
    error(function(data, status, headers, config) {
        console.log("AJAX fail :/ - statut " + status);
        $timeout(errorMailZR_alerte, 3000);
    });

Problem is : with $http, i have a success 200 but nothing is posted and i have no return in my email. What's the problem ?

Well, download Fiddler2 and compare the outgoing requests, what are you missing? Set it. — Erti-Chris Eelmaa, Aug 29 '14 at 06:57

score 1 · Answer 1 · edited May 23 '17 at 12:12

The problem is that jQuery's POST does send your data as form data (e.g. key-value pairs) (https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Sending_and_retrieving_form_data) whereas AngularJS sends your data in the request payload. For a difference between the two see the following SO question: What's the difference between "Request Payload" vs "Form Data" as seen in Chrome dev tools Network tab

In order to make your angular script works with your server you have to convert your data to a URL encoded string as described here: How can I post data as form data instead of a request payload?. Simply setting headers: {'Content-Type': 'application/x-www-form-urlencoded'} is not enough.

A different approach would be to adapt the back-end of your application to parse the message payload instead of the form data parameters.

Jai · Accepted Answer · 2014-08-29T10:13:59.520

To understand this one need to understand the request headers set by angular and jquery, There are differences with the headers like when request is post by jQuery then header might look like this:

POST /some-path HTTP/1.1
Content-Type: application/x-www-form-urlencoded // default header set by jQuery

foo=bar&name=John

You can see this in form data in the request made in the browser, if you use chrome then you can see this in chrome inspector at network tab, if you click the request then you can see the form data and content headers set by the jQuery.

On the other side with angular js $http service, when a request is made then you can find these:

POST /some-path HTTP/1.1
Content-Type: application/json // default header set by angular


{ "foo" : "bar", "name" : "John" }

The real difference is this you have a request payload not usual form data which is used by jQuery. so you need to do something extra at the server side like below.

Use this:

$data = json_decode(file_get_contents("php://input"));
echo $data->date;
// and all other params you have sent

This is due to its default headers

Accept: application/json, text/plain, * / *

Content-Type: application/json

and jQuery unlikely have something else:

Content-Type: application/x-www-form-urlencoded; charset=UTF-8

jQuery.ajax to $http

2 Answers2