我如何在Angular中編寫AJAX JSON調用，這是我的工作JS功能

Question

單擊按鈕后，我在下面調用此函數，它的作用是，它調用json，如果得到成功消息，則它將存儲接收到的數據。 我在下面附上確切返回的截圖。 請注意，我的js函數工作得非常好，我在angular中開始使用新功能，並希望在其中實現相同的功能。

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

這是您獲得成功的條件：

我開始使用angular，然后單擊一個按鈕， 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服務：

https://docs.angularjs.org/api/ng/service/ $ http或https://angular.io

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() {
  }

}

因此，您調用服務的登錄方法，輸入用戶名和密碼，然后訂閱並等待結果。 在.map之后的服務上使用.catch方法可能會很好，這樣您就可以捕獲引發的任何錯誤。

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