我如何用angular编写ajax json调用，这是我工作的js函数

Question

在按钮上单击我在下面调用此函数，它的作用是，它调用json，如果它获得成功消息，则它存储它收到的数据。我附上了它正在返回的截图。请注意我的js功能完全正常，我开始角度新，并希望在其中实现相同。

function check_1(){
	
     user_form_value= $("#user").val();
     password_form_value= $("#password").val();
    
	
     var dict = { username: user_form_value, password: password_form_value };

 $.ajax({
    url: 'http://funiks.com/adminv7/offline-api/login.php',
    type: 'POST',
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    data: JSON.stringify(dict),
})
.done(function(data, textStatus, jqXHR) {
	if(data.status=="SUCCESS") {
    localStorage.setItem("getLoggedInUser",JSON.stringify(data.user));
    console.log(JSON.parse(localStorage.getItem("getLoggedInUser")));
	
	
	loggeduser_array  = JSON.parse(localStorage.getItem("getLoggedInUser"));
	console.log(loggeduser_array.username);
	login_true_2();
	
	}
	//console.log
}).fail(function(jqXHR, textStatus, errorThrown) {
	login_true_2();
}); 

    }

以下是您获得成功的结果：

我开始使用角度，点击按钮login.component.ts会在控制台中显示此内容

    import { Component, OnInit } from '@angular/core';

import { Injectable } from '@angular/core';
import { HttpModule  } from '@angular/http';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})

@Injectable()
export class LoginComponent implements OnInit {
user_form_value = "info@lamchemical.com";
 password_form_value = "lam";

  constructor() { }

  login(){
    console.log(this.user_form_value);
    console.log(this.password_form_value);
  }

  ngOnInit() {
  }

}

请指导我如何进一步使用.axaj和.do角色功能。我希望完全相似，如果用户存在/ 如果成功那么我想将数据存储在本地存储中。

您只需更新我的登录功能，并指导我如何继续操作。

Answer 1

AngularJs为此提供了非常整洁的$ http服务：

feature detected image $ http或https://docs.angularjs.org/api/ng/service/

Answer 2

我会创建一个登录服务并在其中加入类似的内容：

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class LoginService {
  constructor (
    private http: Http
  ) {}

  login(username: String, password: String) {
    return this.http.post('http://funiks.com/adminv7/offline-api/login.php', {username, password})
    .map((res:Response) => res.json());
  }

}

您导入http，然后调用post方法。第一个参数是URL，第二个是正文，第三个是请求选项（如果有的话）。

然后将此服务导入您的组件，并调用login并订阅结果。我也不相信你的组件上面应该有一个@Injectable装饰器....

import { Component, OnInit } from '@angular/core';

import { Injectable } from '@angular/core';
import { HttpModule  } from '@angular/http';
import { LoginService } from './login.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})

export class LoginComponent implements OnInit {
   public user_form_value = "info@lamchemical.com";
   public password_form_value = "lam";

  constructor(private _loginService: LoginService) { }

  login(){
    console.log(this.user_form_value);
    console.log(this.password_form_value);
    this._loginService.login(this.user_form_value, this.password_form_value).subscribe(res => console.log(res))
  }

  ngOnInit() {
  }

}

因此，您调用服务的登录方法，传递您的用户名和密码，然后订阅并等待结果。在.catch之后在服务上使用.map方法可能会很好，这样您就可以捕获任何抛出的错误。

Answer 3

然后使用AngularJS的$http服务。

 $http({
    method: 'POST',
    url: yourDesiredURL,
    data: yourData,
    headers: {
       'Content-Type': 'application/x-www-form-urlencoded'
    }
 }).then(function (response){
    // success
    console.log(response);
 }, function (response){
    // catch the error 
    console.warn(response);
 });