PHP AJAX Antwortdaten mit Angular $ http erhalten Service

Question

Es tut mir leid, wenn dies vorherige Fragen wiederholt, aber ich konnte nicht eine Lösung finden, die mit meinem Problem zu arbeiten scheint & im neuen zu Angular.

Ich habe eine Angular-Form, die Daten mit PHP kommuniziert, um eine E-Mail zu senden, und mein Problem ist mit der JSON-Antwort von der PHP (wie die PHP teilt zurück, ob es innerhalb der JSON selbst, zusammen mit einer Nachricht). Ich kann nicht scheinen, um den Code zu erhalten, basierend auf dem "Erfolg" -Wert innerhalb der JSON, noch tatsächlich die "Nachricht.

Die JSON-Antwortdaten sieht so aus (wenn es aufgrund einer E-Mail fehlschlägt Ausgabe):

Also mein Winkel Code muss auf Basis von "Erfolg" wahr oder falsch, antworten, während auch die "Nachricht" anzuzeigen, die von AJAX in JSON übergeben wird

My Angular-Controller-Code.:

app.controller('ContactController', function ($scope, $http) { 
    $scope.result = 'hidden' 
    $scope.resultMessage; 
    $scope.formData; //formData is an object holding the name, email, subject, and message 
    $scope.submitButtonDisabled = false; 
    $scope.submitted = false; 
    $scope.submit = function(contactform) { 
     $scope.submitted = true; 
     $scope.submitButtonDisabled = true; 
     if (contactform.$valid) { 
      var request = $http({ 
       method : 'POST', 
       url  : 'php/contact.php', 
       data : $.param($scope.formData), //param method from jQuery 
       headers : { 'Content-Type': 'application/x-www-form-urlencoded' } 
      }); 
      if (request.success) { 
       console.log(request); 
       $scope.submitButtonDisabled = false; 
       $scope.result='bg-success'; 
       $scope.resultMessage = request.message; 
       } else { 
       $scope.submitButtonDisabled = true; 
       $scope.resultMessage = request.message; 
       //$scope.resultMessage = "Opps!... something went wrong. Please Contact OpenHouse directly to let them know of this error."; 
       $scope.result='bg-danger'; 
      }; 
       //}; 
      } else { 
      $scope.submitButtonDisabled = false; 
      $scope.resultMessage = 'Failed <img src="http://www.chaosm.net/blog/wp-includes/images/smilies/icon_sad.gif" alt=":(" class="wp-smiley"> Please fill out all the fields.'; 
      $scope.result='bg-danger'; 
     } 
    } 
}); 

Mein PHP-Code:

<?php 

    require_once ("class.phpmailer.php"); // Include phpmailer class 
    ini_set('display_errors', 'On'); 
    error_reporting(E_ALL | E_STRICT); 

    if (isset($_POST['inputFirstName']) && isset($_POST['inputLastName']) && isset($_POST['inputEmail']) && isset($_POST['inputPhone']) && isset($_POST['inputMessage'])) { 

    //check if any of the inputs are empty 
    if (empty($_POST['inputFirstName']) || empty($_POST['inputLastName']) || empty($_POST['inputEmail']) || empty($_POST['inputPhone']) || empty($_POST['inputMessage'])) { 
     $data = array('success' => false, 'message' => 'Please fill out the form completely.'); 
     echo json_encode($data); 
     exit; 
    } 

    $message= 
    'First Name: '.$_POST['inputFirstName'].'<br /> 
    Last Name: '.$_POST['inputLastName'].'<br /> 
    Phone: '.$_POST['inputPhone'].'<br /> 
    Email: '.$_POST['inputEmail'].'<br /> 
    Comments: '.$_POST['inputMessage'].' 
    '; 

    $mail = new PHPMailer();  // Instantiate the PHPMailer Class 
    $mail->IsSMTP();    // enable SMTP 
    $mail->SMTPDebug = 1;   // debugging: 1 = errors and messages, 2 = messages only 
    $mail->SMTPAuth = true;   // SMTP authentication enabled 
    $mail->SMTPSecure = 'ssl';  // secure transfer enabled + REQUIRED for Gmail (either SSL or TLS) 
    $mail->Host = "smtp.gmail.com"; //Gmail SMTP Server to relay thru 
    $mail->Port = 465; // Port 465 as we're using SSL... or use Port 587 for TLS 
    $mail->IsHTML(true);        // We're sending a HTML formatted message 
    $mail->Username = "....@gmail.com"; // Gmail account for authentication 
    $mail->Password = "*********";      // Gmail password for authentication 
    $mail->SetFrom("....@gmail.com"); // The email is being sent from this address 
    $mail->Subject = "Website Contact Form Enquiry"; // The subject line of the email 
    $mail->Body = ($message);       // The actual email message to be sent 
    $mail->AddAddress("....@gmail.com"); // The email is being sent to this address 

    if(!$mail->send()) { 
    echo json_encode(['success' => false, 'message' => 'Message could not be sent. Mailer Error: ' . $mail->ErrorInfo]); 
    exit; 
    } 

    error_log("Data: ".$data['success']." Message: ".$data['message']); 
    echo json_encode(['success' => true, 'message' => 'Thanks! We have received your message.']); 

    } else { 
     echo json_encode(['success' => false, 'message' => 'Please fill out the form completely.']); 
    } 
?> 

Answer 1

zu starten, wird der $ http ein request Objekt nicht zurück, gibt es ein Versprechen, das mit einem response Objekt löst: zu realisieren

 //var request = $http({ 
     //It returns a promise 
     var promise = $http({ 
      method : 'POST', 
      url  : 'php/contact.php', 
      data : $.param($scope.formData), //param method from jQuery 
      headers : { 'Content-Type': 'application/x-www-form-urlencoded' } 
     }); 
     //Use .then method to receive response 
     promise.then(function (response) { 
      var request = response.data; 
      if (request.success) { 
      console.log(request); 
      $scope.submitButtonDisabled = false; 
      $scope.result='bg-success'; 
      $scope.resultMessage = request.message; 
      } 
     }); 

Es ist wichtig, dass Der $ http-Dienst gibt sofort eine ausstehende Versprechen. Das Versprechen ist später aufgelöst (entweder erfüllt oder zurückgewiesen), wenn die Antwort vom Server zurückkommt.

Verwenden Sie die .then-Methode des Versprechens, um Erfolgs- und Zurückweisungshandler bereitzustellen, die entweder die erfüllte oder die abgelehnte Antwort auflösen.

Weitere Informationen finden Sie unter: AngularJS $http Service API Reference - General Usage

---

UPDATE

Der AngularJS Rahmen standardmäßig codiert und Beiträge Content-Type: 'application/json' verwenden.

Um JSON-Daten in einem PHP-Backend, so etwas wie zu erhalten:

$json = file_get_contents('php://input'); 
$obj = json_decode($json); 

Dann wird die POST mit AngularJS vereinfacht werden:

var promise = $http({ 
     method : 'POST', 
     url  : 'php/contact.php', 
     //data : $.param($scope.formData), //param method from jQuery 
     data: $scope.data; 
     //headers : { 'Content-Type': 'application/x-www-form-urlencoded' } 
     //Defaults to: 
     //headers: {'Content-Type': 'application/json'} 
    }); 
    //Use .then method to receive response 
    promise.then(function (response) { 
     var request = response.data; 
     if (request.success) { 
     console.log(request); 
     $scope.submitButtonDisabled = false; 
     $scope.result='bg-success'; 
     $scope.resultMessage = request.message; 
     } 
    }); 

Answer 2

Danke an alle für die Hilfe; Ich war in der Lage, eine Antwort nach dem asyn http Anruf & anzuzeigen es auf dem Bildschirm ... Aber egal, was ich versuchte, es verpackt immer die HTTP-Header mit den Daten, innerhalb der Datenantwort.

Wenn die PHP keine E-Mail gesendet hat (ich habe alle Befehle zum Senden von E-Mails entfernt), dann wären die Daten nur Daten. Wenn die PHP eine E-Mail gesendet hat, wäre die Antwort HTTP-Header + Daten innerhalb der Datenantwort.

Also am Ende auf der Schrägseite, i die Daten als Reaktion auf einen String umgewandelt, spaltete die Zeichenfolge { basierend auf, die mir eine neue Zeichenfolge mit nur die Daten (und keine Header) geben würde, einige zusätzliche \ Trennung der Werte in der Zeichenfolge, und offensichtlich und }

Also so, durch String-Manipulation konnte ich die Antwort bekommen, die ich wollte.

Hier ist der Arbeitswinkel Controller:

app.controller('ContactController', function ($scope, $http) { 
    $scope.result = 'hidden' 
    $scope.resultMessage; 
    $scope.formData; //formData is an object holding the name, email, subject, and message 
    $scope.submitButtonDisabled = false; 
    $scope.submitted = false; 
    $scope.submit = function(contactform) { 
     $scope.submitted = true; 
     $scope.submitButtonDisabled = true; 
      var promise = $http({ 
       method : 'POST', 
       url  : 'php/contact.php', 
       data : { 
        firstname: $scope.formData.inputFirstName, 
        lastname: $scope.formData.inputLastName, 
        emailid: $scope.formData.inputEmail, 
        phoneno: $scope.formData.inputPhone, 
        message: $scope.formData.inputMessage 
       }, 
       headers : {'Content-Type': 'application/json'} 
      }) 
      promise.then(function (response) { 
       var request = JSON.stringify(response.data); //convert JSON data to string for manipulation 
       var startpos = request.indexOf("{");   //locate '{' as its the start of the data we want 
       var endpos = request.lastIndexOf("}");  //locate '}' as its the end of the data we want 
       var res = request.slice(startpos, endpos); //Extract the actual data now we know where it is. 
       var newresponse = res.split("\\");   //Split the data into new array 
       var answer = request.search("true");   //search the string to see if it contains the word "true" meaning an email was sent. 

       if (answer >= 0) { 
       $scope.submitButtonDisabled = false; 
       $scope.result='bg-success'; 
       $scope.resultMessage = newresponse[5].replace('"', " "); 
       } else { 
       $scope.submitButtonDisabled = true; 
       $scope.resultMessage = newresponse[5].replace('"', " "); 
       $scope.result='bg-danger'; 
       } 
      }); 
     } 
    });