Получение правильного форматирования JSON с угловой формы

Question

Это обновленная версия моего исходного вопроса. Я создал форму обратной связи (ff) с текстовым вводом и вводом файла, связанным с [(ngModel)] = "feedback.message" & "feedback.screenshot".

Консоль дает мне эту ошибку: «JSON.parse: неожиданный конец данных в строке 1 столбца 1 данных JSON» либо из файла ff-service, либо из файла компонента ff-формы.

Моя форма:

<form #f="ngForm" (ngSubmit)="onSubmit(f.value)" > 

      <div class="modal-body"> 
       <p class="lead-text"><strong>Bel ons</strong> op 0488 020 010</p> 
       <p><em>of</em></p> 

        <div class="form-group"> 
         <label for="message">Verzend bericht</label> 
         <textarea class="form-control" required [(ngModel)]="feedback.message" name="message" #message="ngModel" placeholder="Beschrijf uw vraag, feedback of idee" rows="3" ></textarea> 
         <div [hidden]="message.valid || message.pristine" class="alert alert-danger"> 
          Geef aub een beschrijving 
         </div> 
         <label for="screenshot">Schermafbeelding toevoegen</label> 
         <input type="file" [(ngModel)]="feedback.screenshot" name="screenshot" #screenshot="ngModel"> 
        </div> 

      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Annuleren</button> 
       <button type="submit" class="btn btn-default" [disabled]="!f.form.valid" >Verzenden</button> 
      </div> 

     </form> 

Вот мой файл компонента.

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

import { Feedback }    from './feedback'; 
import { FormService }   from './feedback-form.service'; 

@Component({ 
    selector: 'feedback-form', 
    templateUrl: 'app/feedback-form.component.html', 
    providers: [FormService] 
}) 

export class FeedbackFormComponent implements OnInit { 
    response: string; 
    value: string; 

    constructor(private _formService : FormService){ } 

    public feedback: Feedback; 

    ngOnInit(){ 
     //initialize form 
     this.feedback = { 
      message: '', 
      screenshot: '' 
     } 
    } 

    submitted = false; 

    onSubmit(form: Feedback) { 
     this._formService.sendMail(form) 
      .subscribe(
       response => this.response = response, 
       error => console.log(error) 
      ) 
     this.submitted = true; 
    } 


    //TODO remove when we are done 
    get diagnostic(){ 
     return JSON.stringify(this.feedback); 
    } 
} 

//https://angular.io/docs/ts/latest/guide/forms.html 

мои form.service.ts файл:

import { Injectable }        from '@angular/core'; 
import { Http, Response, Headers, RequestOptions, URLSearchParams } from '@angular/http'; 
import { Observable }        from 'rxjs/Observable'; 

@Injectable() 

export class FormService { 
    constructor(private _http: Http) { 
     } 
    private _mailUrl = 'http://app/form-mailer.php'; 

    sendMail(value: any): Observable<any> { 
     const body = new URLSearchParams(value); 
     body.set('message',value.message); 
     body.set('screenshot',value.screenshot); 


     let headers = new Headers(); 
     headers.append('Content-Type','application/x-www-form-urlencoded'); 
     headers.append('Accept','application/json'); 
     //headers.append('Access-Control-Allow-Origin','*'); 
     return this._http.post(this._mailUrl, body.toString(), { headers: headers }) 
      .map(res => { 
       res.json(); 
       console.log(); 
      }) 
      .catch(this.handleError) 
    } 

    private handleError (error: any) { 
     // In a real world app, we might use a remote logging infrastructure 
     let errMsg = (error.message) ? error.message : 
     error.status ? `${error.status} - ${error.statusText}` : 'Server error'; 
     console.error(errMsg); // log to console instead 
     return Observable.throw(errMsg); 
    } 
} 

код сервера на стороне PHP:

<?php 
header('Access-Control-Allow-Origin: *'); 
header('Access-Control-Allow-Headers: X-Requested-With'); 
header('Access-Control-Allow-Methods: POST, GET, OPTIONS'); 
header('Content-Type: application/json'); 

error_reporting(0); 

$formData = json_decode(file_get_contents('php://input')); 
foreach ($formData as $key=>$value) { 
     $_POST[$key]=$value; 
    } 

$formMsg   = $_POST['message']; 
$formScreenshot  = $_POST['screenshot']; 

$msg = "Message:\n $formMsg\n Screenshot:\n $formScreenshot"; 
mail('info@bla.be','Feedback',$msg); 
echo json_encode($formData); 
?> 

Спасибо за вашу помощь! Фред

Answer 1

UPDATE 2

Я собираюсь начать разбивая вопросы, которые я вижу в вашем файле form.service.ts.

1. Передача объекта Javascript в конструктор URLSearchParams, когда он действительно ожидает строку. Я не совсем уверен, почему это еще не вызвало ошибку TypeScript.
2. Вы используете объект URLSearchParams. Думаю, вы использовали этот объект для попытки использования JSONP? Но JSONP специально разработан для работы с глаголом «GET», а не с «POST». Также сервер, на который вы отправляете запрос JSONP, должен его поддерживать.
3. В области заголовков вы устанавливаете «Content-Type» в «application/x-www-form-urlencoded», это странно, потому что в вашем PHP-коде вы фактически декодируете содержимое тела, как если бы оно было Строковый объект JSON. Я думаю, причина в том, что все это может быть отчасти связано с тем, что «application/x-www-form-urlencoded» в основном представляет собой QueryString внутри тела вашего запроса «POST». Это также, вероятно, позволяет вам обойти проблему CORS.
4. Вы должны быть совместимы с вашим «Content-Type», прямо сейчас вы отправляете структуру QueryString в своем теле на PHP-сервер, на сервере вы интерпретируете тело как JSON, это несоответствие.

Я хочу быть еще более ясным, что мой опыт PHP не хватает. Вы говорите, что это на самом деле посылает вам по электронной почте параметры, поэтому PHP может сделать для вас магию. Я не могу объяснить, почему он возвращает NULL в ответ, но он, очевидно, смог разобрать данные и отправить их вам. Вы, вероятно, захотите найти дополнительную информацию у некоторых людей PHP.

---

UPDATE

Основываясь на вашей обратной связи, это выглядит как ваш PHP код не возвращает JSON. Я не эксперт по PHP, но похоже, что вам нужно сделать this.

echo json_encode($value);//replaces: echo $value ->name; 

Если я понимаю, что происходит, просто включая заголовок не достаточно для PHP, чтобы вернуть формат JSON данных.

Также удалите "console.log (res);" и скобки. Как отмечает rinukkusu в комментариях, вы должны быть осторожны при использовании обозначения лямбда-кронштейна.

---

Похоже, сервер, на который вы отправляете сообщения, не возвращает свои результаты в JSON. В зависимости от конфигурации сервера, специально запрашивающей json, вы можете получить результаты, которые вы ищете, например, в вашем коде. Я бы добавил еще один заголовок, чтобы сообщить серверу, что вам нужны результаты в json. Если это не поможет, я также зарегистрирую ответ на консоль, чтобы вы могли видеть результаты, которые вы возвращаете.

let headers = new Headers(); 
headers.append('Content-Type','application/x-www-urlencoded'); 
//headers.append('Access-Control-Allow-Origin','*'); 
headers.append('Accept','application/json');//<------- 
return this._http.post(this._mailUrl, body.toString(), { headers: headers }) 
    .map(res => { 
     console.log(res);//<------------ 
     res.json(); 
    }) 
    .catch(this.handleError) 

, если объект Рез пуст вы можете смотреть трафик HTTP через отладчик браузера или Fiddler2 и посмотреть, что на самом деле происходит с коммуникациями.

Поскольку у вас есть заголовок cors, я просто хочу указать, что если вы принимаете json, и вы делаете запрос с перекрестным доменом, тогда серверу необходимо будет ответить назад конкретными заголовками в ответ, который нужен браузеру прежде чем он позволит использовать данные.