Javascript 如何在angular中编写ajax json调用，下面是我正在使用的js函数

点击一个按钮，我调用下面的函数，它调用一个json，如果它得到一条成功消息，它就会存储它收到的数据。我在下面附上一个截图，它到底返回了什么。请注意，我的js函数工作得非常好，我在angular中开始了新的尝试，并希望在其中实现同样的效果

功能检查_1（）{
user_form_value=$（“#user”）.val（）；
密码形式值=$（“#密码”）.val（）；
var dict={username:user\u form\u value，password:password\u form\u value}；
$.ajax({
网址：'http://funiks.com/adminv7/offline-api/login.php',
键入：“POST”，
contentType:'application/json；charset=utf-8'，
数据类型：“json”，
数据：JSON.stringify（dict），
})
.done（函数（数据、文本状态、jqXHR）{
如果（数据状态=“成功”）{
setItem（“getLoggedInUser”，JSON.stringify（data.user））；
log（JSON.parse（localStorage.getItem（“getLoggedInUser”））；
loggeduser_array=JSON.parse（localStorage.getItem（“getLoggedInUser”）；
log（loggeduser_array.username）；
登录_true_2（）；
}
//console.log
}).fail（函数（jqXHR、textStatus、errorshown）{
登录_true_2（）；
}); 
}

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

---

$http或在

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

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并订阅结果。我也不认为您的组件上面应该有一个

@可注入的

装饰器

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

方法可能会更好，这样您就可以捕获抛出的任何错误。

然后使用AngularJS的服务

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

---

我如何调用

data:yourData

，如果你看到我在js中的示例，我是这样做的-`var dict={username:user\u form\u value，password:password\u form\u value}；`，这里我该怎么做呢？您必须首先序列化数据，因为您的数据是一个对象，您可以使用jQuery的

$.param

来实现这一点。因此，在您的情况下，它将是

data:$.param（dict）

，并将以这种格式返回序列化字符串

username=user\u form\u value&password=password\u form\u value

。还有许多可用的解决方法，您可以在

$http

请求中将对象作为数据传递。但那将是另一个故事。你能纠正我的pastebin吗-，得到以下错误，请看这里的屏幕截图-我确实理解我应该有一个不同的文件，我应该把它命名为login.service.ts，因为我是新的，为了更好地理解，我可以在login.component.ts上尝试这样做吗？在下一步中，我可以按照实际建议的方式进行操作？是的，如果需要，您可以将其全部放在login组件中。只需创建另一个方法，该方法与登录方法在服务中的作用完全相同，并从组件中调用它。我正在按照您的指导进行尝试，但遇到错误，请参见我的login.components.ts代码此处第27行-您需要从组件中去掉@Injectable。仅用于服务。其次，您需要安装

map

。您正在导入它，但可能没有安装它。您可以通过运行npm install rxjs--save来安装

rxjs

，我是按照您的指导安装的，我也去掉了@Injectables，但它仍然显示出一些错误-