我如何执行阿贾克斯后，在角请求头 [英] How do I execute an ajax post with request header in Angular

问题描述

我有一个工作code jQuery的，在这里我使用 request.setRequestHeader（X-CSRF令牌，$ .cookie（'令牌'发布的数据，从形式与令牌））; 。我知道如何获取表单数据到一个 $范围使用 NG-模型，但我怎么转换<下面以一个角兼容的功能，code> submit_this（）功能？

jQuery的code：

  $（机构）。在（点击，#login，函数（）{

        VAR URL =HTTP：//localhost/lab/theapp/api/user/login.json;
        变种名称= $（'＃用户）VAL（）。

        VAR通= $（'＃通）VAL（）。

        VAR数据='用户名='+ EN codeURIComponent（名）+'＆放大器;密码='+ EN codeURIComponent（合格）;
        VAR类型=后;

        submit_this（类型，数据，URL）;

    }）;


    //需要的功能被重新写为AngularJs
    功能submit_this（类型，数据，URL）{
            尝试 {

                $阿贾克斯（{
                        网址：网址，
                        类型：类型，
                        数据：数据，
                        数据类型：JSON，
                        beforeSend：函数（要求）{
                        request.setRequestHeader（X-CSRF令牌，$ .cookie（'令牌'））;
                        }，
                        错误：函数（XMLHtt prequest，textStatus，errorThrown）{

                        }，
                        成功：功能（数据）{
                            如果（data.sessid）{
                                VAR sessid = data.sessid;
                                VAR为session_name = data.session_name;
                                VAR令牌= data.token;
                                jQuery.cookie（令牌，令牌）;
                            }
                            的console.log（数据）;
                        }
                }）;
            }
        赶上（错误）{执行console.log（错误）}
        返回false;
}
 

解决方案

您可以使用$ HTTP服务来做到这一点。你最好创建你自己的服务，演示code：

  VAR demoApp = angular.module（DemoApp）;
demoApp.controller（yourcontroller功能（$范围，yourService）{
    yourService.postData（HTTP：//你的/ URL，{X-CSRF令牌：$ scope.token}）
        .success（功能（数据）{
            //处理成功这里响应
        }）错误（功能（错误）{
            //处理错误在这里响应
        }）;
}）;
demoApp.service（yourService功能（$ HTTP）{
    this.postData =功能（URL，_headers）{
        返回$ HTTP（{
                  方法：POST，
                  网址：网址，
                  标题：_headers
               }）;
     };
}）;
 

这里是角$ HTTP文档。

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;   
}

解决方案

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.

这篇关于我如何执行阿贾克斯后，在角请求头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！