Поэтому я перехожу от простого старого html и javascript для своего веб-приложения к Angular. Таким образом, мои вызовы javascript ajax к моему контроллеру сервера php необходимо переписать для Angular. Как мне это сделать? Я новичок в написании вызовов ajax в jQuery и новичок в Angular 8.

Код jQuery ajax, который я хочу написать в форме AngularTS

$.ajax({
      data:     DATA,
      url:      '../upgrade/controller/app_validateManager.php',
      dataType: 'json',
      type:     'POST',

        beforeSend: function(x) {
          if (x && x.overrideMimeType) {
            x.overrideMimeType("application/json;charset=UTF-8");
            }
        },  

        success: function(data){
            console.log("works")
            if (data.status == 0)
              {
              alert('Response >> '+data.datr[0]);
              // window.location.href = redirectLink;
              }
            else{
             console.log(prockey + " error")
             console.log(data)
             for(i=0;i<data.errpos.length;i++){
                  $('#err'+data.errpos[i]).innerHtml = data.errmsg[i]
                }
            }
         },
         error: function (xhr, status, errorThrown) {
          //Here the status code can be retrieved like;
          xhr.status;
          //The message added to Response object in Controller can be retrieved as following.
          xhr.responseText;
      }
    });

Что пробовал:

// Angular Service code:
const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json;charset=UTF-8"',
  })
};

private handleError(error: HttpErrorResponse) {
  if (error.error instanceof ErrorEvent) {
    // A client-side or network error occurred. Handle it accordingly.
    console.error('An error occurred:', error.error.message);
  } else {
    // The backend returned an unsuccessful response code.
    // The response body may contain clues as to what went wrong,
    console.error(
      `Backend returned code ${error.status}, ` +
      `body was: ${error.error}`);
  }
  // return an observable with a user-facing error message
  return throwError(
    'Something bad happened; please try again later.');
  }

  ajaxEngine(DATA: PostData): Observable<PostData> {
  console.log(DATA);
    return this.httpClient.post<PostData>(this.phpurl, DATA, httpOptions)
      .pipe(
        retry(3), // retry a failed request up to 3 times
        catchError(this.handleError)
      );
  }

// Angular Component code:
    this.mainService.ajaxEngine(new PostData(newDATA))
    .subscribe(
      data => {
        console.log('works' + data);
        this.postData = data;
      },
      error => {
        console.log(error);
      }
    );

2
JosiFan 31 Окт 2019 в 11:42
Вы на правильном пути. Где ты застрял?
 – 
KiraAG
31 Окт 2019 в 11:51
Я застрял, пытаясь понять часть успеха и ошибки. В jquery ajax есть xhr, что эквивалентно в Angular?
 – 
JosiFan
31 Окт 2019 в 12:07
Изучите это для обработки ошибок. Здесь у вас есть объект ошибки, который содержит всю информацию об ошибке. А также объект ошибки имеет тип HttpErrorResponse. Таким образом, вы можете получить информацию, которую ищете, используя упомянутые в ней свойства.
 – 
KiraAG
31 Окт 2019 в 12:13
Ладно спасибо! пойду посмотрю потом обновлю
 – 
JosiFan
31 Окт 2019 в 12:28

1 ответ

Лучший ответ

Вы можете использовать ajax из rxjs/ajax, который создает наблюдаемое для запроса ajax, а затем подписывается на него для доступа к полученным данным или обработки ошибок, перейдите по этой ссылке для получения более подробной информации: rxjs ajax

1
Bilel-Zheni 31 Окт 2019 в 12:00