Using Angular to make Post to PHP file

Question

I'm learning how to use HttpClient.post to update MySQL database. The table i'm inserting is:

|id - log|

The PHP file is as follows,

<?php 
   header('Access-Control-Allow-Origin: *');    
    header('Access-Control-Allow-Headers: X-Requested-With');
    header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
include 'db.php';

$postdata=file_get_contents("php://input");
$request = json_decode($postdata);
$message = $request->message;

// Create connection
$conn = new mysqli($server_name, $mysql_username, $mysql_password, $db_name);


 $sql = "INSERT INTO shootingchatlog (id, log) VALUES (NULL, '$message')";

 if($conn -> query($sql) === TRUE ){
 echo "message Uploaded Successfully";
 }else{
 echo "Error Uploading Image";
 }
 mysqli_close($conn);

I keep receiving errors at the line

$message = $request->message;

which brings me to think that the problem has to do with my code here in angular.

   httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json'
    })
  };



  constructor(private http: HttpClient) { }


  public uploadService(mess: string): void {
    console.log(mess);
     this.http.post(this.url, JSON.stringify({"messasge": mess}), this.httpOptions)
           .subscribe((res: Response) => {
        console.log(res);
      },
      err => {
        console.log("Error occured", err);
      });
    }

The most common error I get is:

SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse

I'm really not sure what I'm doing incorrectly. There doesn't seem to be any documentation on this. Or if it is, it's usually too abstract. Any help would be grateful!

Look at the inspector in chrome or firefox and look at the response from the server. It seems as if it's returning HTML or XML instead of JSON if you're getting the '<' character — Chad K
– Chad K, Commented Aug 1, 2018 at 16:26
WARNING: When using mysqli you should be using parameterized queries and bind_param to add user data to your query. DO NOT use string interpolation or concatenation to accomplish this because you have created a severe SQL injection bug. NEVER put $_POST, $_GET or any user data directly into a query, it can be very harmful if someone seeks to exploit your mistake. — tadman
– tadman, Commented Aug 1, 2018 at 18:07
Do try and get out of the habit of cluttering up your code with needless things like === true. Many functions are designed to return values that evaluate as logically true or false so that's redundant. — tadman
– tadman, Commented Aug 1, 2018 at 18:08
with httpClient you needn't use JSON.stringify or header that say a json — Eliseo
– Eliseo, Commented Aug 1, 2018 at 19:26

Taher · Accepted Answer · 2018-08-01 16:19:28Z

2

from https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST

application/x-www-form-urlencoded: the keys and values are encoded in key-value tuples separated by '&', with a '=' between the key and the value. Non-alphanumeric characters in both keys and values are percent encoded: this is the reason why this type is not suitable to use with binary data (use multipart/form-data instead)

Change the content type from application/x-www-form-urlencoded to multipart/form-data

also check this thread which is quite helpful: application/x-www-form-urlencoded or multipart/form-data?

answered Aug 1, 2018 at 16:19

Taher

12.1k3 gold badges31 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

JD333 Over a year ago

Originally I was using application/json. But, I was getting the error. Failed to load Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

JD333 Over a year ago

using multipart form data. I still get the same error in my HTTP response. MySQL database gets an update. It adds a new row, but the value is never inserted in the log column.

Taher Over a year ago

what happens when you change the content type to application/x-www-form-urlencoded, multipart/form-data or remove httpOptions at all ?

Collectives™ on Stack Overflow

Using Angular to make Post to PHP file

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related