How do I execute an ajax post with request header in Angular

Question

I am having a working code in jquery, where I post data from form with a token using request.setRequestHeader("X-CSRF-Token", $.cookie('token'));. I know how to get the form data into a $scope using ng-model, but how do I convert the submit_this() function below to an angular compatible function?

The Jquery Code:

$("body").on("click", "#login", function() {

        var url = "http://localhost/lab/theapp/api/user/login.json";    
        var name = $('#user').val();

        var pass = $('#pass').val();

        var data = 'username=' + encodeURIComponent(name) + '&password=' + encodeURIComponent(pass);
        var type = "post";

        submit_this(type,data,url);

    }); 


    //the function that need to be re-written for AngularJs   
    function submit_this(type,data,url) {
            try {   

                $.ajax({
                        url: url,
                        type: type,
                        data: data,
                        dataType: 'json',
                        beforeSend: function (request) {
                        request.setRequestHeader("X-CSRF-Token", $.cookie('token'));
                        },
                        error: function(XMLHttpRequest, textStatus, errorThrown) {

                        },
                        success: function (data) {
                            if (data.sessid){   
                                var sessid = data.sessid;
                                var session_name = data.session_name;
                                var token = data.token;
                                jQuery.cookie("token", token);
                            }
                            console.log(data);
                        }
                });
            }   
        catch (error) { console.log(error) }
        return false;   
}

Tyler.z.yang · Accepted Answer · 2014-11-13 03:49:33Z

2

You can use $http service to do that. You'd better create you own service, Demo code:

var demoApp = angular.module("DemoApp");
demoApp.controller("yourcontroller", function($scope, yourService){
    yourService.postData("http://your/url", {"X-CSRF-Token": $scope.token})
        .success(function(data){
            //handle success response here
        }).error(function(error){
            //handle error response here 
        });                                  
});
demoApp.service("yourService", function($http){
    this.postData = function(url, _headers){
        return $http({
                  method: "POST", 
                  url: url,
                  headers: _headers
               });
     };
});

Here is angular $http document.

answered Nov 13, 2014 at 3:49

Tyler.z.yang

2,4601 gold badge21 silver badges31 bronze badges

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

3 Comments

Tyler.z.yang Over a year ago

@esafwan or you can post your code to jsfiddle. So that I can create a service demo in it.

esafwan Over a year ago

I couldn't test this code, yet. Will update as soon as I test. Thanks for the direction.

Tyler.z.yang Over a year ago

@esafwan My pleasure. I'll be waiting. : )

Collectives™ on Stack Overflow

How do I execute an ajax post with request header in Angular

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related