Javascript Angular：在AJAX成功时设置变量

我正在开发一个小应用程序，一直在玩angular。我在单击一个按钮调用ajax get请求时遇到了这个问题。在ajax成功时，我想为给定的结果设置一个变量。但问题是变量没有设置。我的代码如下

export class HomePageComponent implements OnInit {
apiEndpoint = "myapiendpoint";
searchQuery = "";
searchResult = {};

constructor() {}

onSearchSubmit(e) {
    e.preventDefault();
    let queryUrl = this.apiEndpoint + this.searchQuery;

    $.ajax({
      url: queryUrl,
      dataType: "json",
      method: "GET",
      success: function(res) {
        this.searchResult = res;
      },
      error: function() {
        console.log("Error");
      }
    });
  }

  ngOnInit() {}
}

当我尝试设置变量searchResult时，它并没有设置，但当我将响应直接记录在success回调中时，它会在控制台中给出整个响应。我做错了什么

---

谢谢

用箭头功能试试这个方法

$.ajax({
  url: queryUrl,
  dataType: "json",
  method: "GET",
  success: (res) => {
    this.searchResult = res;
  },
  error: function() {
    console.log("Error");
  }
});

正如建议远离jquery一样，httpModule也支持所有http请求

使用httpClient

export class HomePageComponent implements OnInit {
apiEndpoint = "myapiendpoint";
searchQuery = "";
searchResult = {};

    constructor(private http: HttpClient) { }

onSearchSubmit(e) {
    e.preventDefault();
    let queryUrl = this.apiEndpoint + this.searchQuery;

    this.http.get(queryUrl).subscribe(result => this.searchResult = result );

  }

  ngOnInit() {}
}

---

使用箭头功能尝试这种方法

$.ajax({
  url: queryUrl,
  dataType: "json",
  method: "GET",
  success: (res) => {
    this.searchResult = res;
  },
  error: function() {
    console.log("Error");
  }
});

正如建议远离jquery一样，httpModule也支持所有http请求

使用httpClient

export class HomePageComponent implements OnInit {
apiEndpoint = "myapiendpoint";
searchQuery = "";
searchResult = {};

    constructor(private http: HttpClient) { }

onSearchSubmit(e) {
    e.preventDefault();
    let queryUrl = this.apiEndpoint + this.searchQuery;

    this.http.get(queryUrl).subscribe(result => this.searchResult = result );

  }

  ngOnInit() {}
}

---

尽量不要在angular中使用jquery ajax

尝试使用rxjs

---

尽量不要在angular中使用jQueryAjax

尝试使用rxjs

当您在函数中使用此关键字时，它将指向success函数的作用域而不是外部作用域，因此它不会更新外部作用域变量。这个问题有两种解决办法

一,。使用箭头功能：

因为箭头函数没有自己的作用域。此in-arrow函数始终指向outer函数

二,。将此外部变量复制到其中一个变量中，然后使用该变量而不是此变量：

将外部函数中的该变量复制到一个变量中，然后在ajax成功函数中使用该变量，在这种情况下，这将指向正确的上下文

如下

export class HomePageComponent implements OnInit {
apiEndpoint = "myapiendpoint";
searchQuery = "";
searchResult = {};

var that=this; // Copied this into that  variable 
constructor() {}

onSearchSubmit(e) {
    e.preventDefault();
    let queryUrl = this.apiEndpoint + this.searchQuery;

    $.ajax({
      url: queryUrl,
      dataType: "json",
      method: "GET",
      success: function(res) {
        that.searchResult = res;// use that instead of this
      },
      error: function() {
        console.log("Error");
      }
    });
  }

  ngOnInit() {}
}

使用上述解决方案之一，它将解决您的问题

当您在函数中使用此关键字时，它将指向成功函数的作用域而不是外部作用域，因此它不会更新外部作用域变量。这个问题有两种解决办法

一,。使用箭头功能：

因为箭头函数没有自己的作用域。此in-arrow函数始终指向outer函数

二,。将此外部变量复制到其中一个变量中，然后使用该变量而不是此变量：

将外部函数中的该变量复制到一个变量中，然后在ajax成功函数中使用该变量，在这种情况下，这将指向正确的上下文

如下

export class HomePageComponent implements OnInit {
apiEndpoint = "myapiendpoint";
searchQuery = "";
searchResult = {};

var that=this; // Copied this into that  variable 
constructor() {}

onSearchSubmit(e) {
    e.preventDefault();
    let queryUrl = this.apiEndpoint + this.searchQuery;

    $.ajax({
      url: queryUrl,
      dataType: "json",
      method: "GET",
      success: function(res) {
        that.searchResult = res;// use that instead of this
      },
      error: function() {
        console.log("Error");
      }
    });
  }

  ngOnInit() {}
}

---

使用上述解决方案之一，它将解决您的问题

您是否尝试将其记录在成功回调中，以查看将结果附加到什么？您是否尝试将其记录在成功回调中，以查看将结果附加到什么？这指的是当前代码正在其中执行的上下文对象，例如foo.success; 这个=>foo不是作用域，因为某些原因箭头函数起作用了，我不知道为什么。。。但无论如何还是要感谢…这是指当前代码正在其中执行的上下文对象，例如foo.success；这个=>foo不是作用域，因为某些原因箭头函数起作用了，我不知道为什么。。。不过还是要谢谢你…谢谢你的建议：这只是一个快速测试。。。我肯定会切换到httpClient：谢谢你的建议：这只是一个快速测试。。。我一定会切换到httpClient：