How to post json object with Http.post (Angular 2) (php server side)

Question

I'm trying to recreate Post JSON from angular 2 to php but it doesn't work as there's nothing in the $_REQUEST variable on php side

The code:

searchHttp({body}: any): Promise<any>
{   
    let headers = new Headers ({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers, method: "post" });

    let test_this = {"search": "person"};

    return this.http.post(this.post_url, JSON.stringify(test_this), options)
        .toPromise()
        .then(response =>  
            {   
                return response.text();
            })  
        .catch(this.handleError);
}

Is there something I'm missing? I know that posts works with another format because I have that answered in another question.

Also, is http.request better than http.post?

Edit:

After much consultation with Angular/Javascript experts, they believe this is a php issue. So anyone with knowledge of how to accept JSON objects on php side will be gladly welcomed.

You can get rid of the request options. It's useless. What you are using is already the default. I don't use php, but are you sure this is not just a php problem? You angular code like fine. Maybe you want to post a php question instead. — Paul Samsotha
– Paul Samsotha, Commented Dec 15, 2016 at 0:27
nope, php works fine since if I use jquery's Ajax it returns the results as expected. And I managed a work around from a previous answer (which you were part of) see... stackoverflow.com/questions/41135595/… . Though if someone has a better answer I'll just leave this here — A. L
– A. L, Commented Dec 15, 2016 at 0:29
If you're talking about this jquery, that is not sending JSON. The default data type for jquery is application/x-www-form-urlencded, if you don't configure it for JSON. Google how to send JSON with jquery, then do it. I'm sure it will fail also, if this angular code is failing. Then Google how to accept JSON with php — Paul Samsotha
– Paul Samsotha, Commented Dec 15, 2016 at 0:37
I know that dataType: 'json' is the format. That was for something else that I was testing. — A. L
– A. L, Commented Dec 15, 2016 at 0:39
you accept json on php with json_decode no? And for Ajax sending JSON, I guess I'll google it later. — A. L
– A. L, Commented Dec 15, 2016 at 0:41

Amit kumar · Accepted Answer · 2016-12-15 06:14:59Z

angular 2 client side part

 ngOnInit() { 

        let body=Api+'product.php'+'?id=' + this.link_id;
        this._callservice.callregister(body)
                    .subscribe( data => {
                                this.outputs=data;                           
                       }, 
                    error => console.log("Error HTTP Post"),
                    () => console.log("completed") );  
      }    
    }

call.service.ts

import {Injectable} from '@angular/core';
import {Router} from '@angular/router';
import {Http, Response, Headers, RequestOptions} from '@angular/http';
import {Observable}     from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

@Injectable()
export class AuthenticationService {

  constructor(private _http:Http){}

  postregister(api:any){
//      console.log(api);
  let headers = new Headers({'Content-Type':'application/x-www-form-urlencoded'});
  let options = new RequestOptions({ headers: headers, method: "post"});
      return this._http.get(api,options)
          .map(res => res.json())
          .catch(this.handleError);
  }
  private handleError (error: Response) {
        console.error(error);
        return Observable.throw(error.json().error || ' error');
    }

}

Server side PHP make sure on server side you have these three lines in php code.

   header('Access-Control-Allow-Origin: *');    
    header('Access-Control-Allow-Headers: X-Requested-With');
    header('Access-Control-Allow-Methods: POST, GET, OPTIONS');

Php file:

  <?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: X-Requested-With');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
$servername = "localhost";
$username1 = "root";
$password = "root";
$dbname = "product";

$e=array("error"=>1,"message"=>"Account Already Exists");

$accountCreated = array( "error" =>0, 
                         "data" => array(
                                   "username" => "amit" , 
                                   "password" => "anypassword",
                                   "role"=> "user", 
                                   "id" => "anyid" ) );

// Create connection
$conn = mysqli_connect($servername, $username1, $password, $dbname);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

    $username = $_GET["username"];
    $Pass = $_GET["password"];
    $role= $_GET["role"];
    $sql="SELECT COUNT(*) as user FROM users WHERE username = '$username'";
    $result = mysqli_query($conn,$sql);
    $line = mysqli_fetch_assoc($result);
    $count = $line['user'];
    if($count!=0)
       {
          echo json_encode($e);
       }
    else
       {
         $sql="INSERT INTO users(username,password,role)VALUES('$username','$Pass','$role')";
         $result=mysqli_query($conn,$sql);
         $sql="select * from users where username ='$username'";
         $result=mysqli_query($conn,$sql);
         $line=mysqli_fetch_assoc($result);
         {
             $accountCreated['data']['username']=$line['username'];
             $accountCreated['data']['password']=$line['password'];
             $accountCreated['data']['role']=$line['role'];
             $accountCreated['data']['id']=$line['id'];
         }
         echo json_encode($accountCreated);
        }

 ?>

i hope this will work for you .. for json i guess you should pass as options and use json decode for values you get in options.

I know how to do it via get method with the question mark. Just need to know how to do it for JSON format
can you try $str_json = file_get_contents('php://input'); on server side php. This reads the raw POST data. it may work in your case. read about it.

Mitch · Accepted Answer · 2016-12-15 00:57:01Z

1

There doesn't appear to be anything wrong with the Angular code. The issue is in what the PHP is expecting to receive. I am not a PHP expert, but as you've mentioned that it works fine with jQuery, then that indicates that your PHP is expecting a URL-encoded value (as jQuery tends to work with that), not a JSON value.

In other words, what the server is trying to parse is:

search=person

What you are sending is:

{ "search": "person" }

Try something more like the following to send it in the format you're wanting:

let test_this = { "search": "person" };
let headers = new Headers ({ 'Content-Type': 'application/x-www-form-urlencoded' });
let options = new RequestOptions({ headers: headers, method: "post" });

http.post(this.post_url, test_this, options)

answered Dec 15, 2016 at 0:57

Mitch

1,95717 silver badges24 bronze badges

2 Comments

A. L Over a year ago

Yeah it's probably the php side, do you know anything about expect a json format?

Mitch Over a year ago

Um pretty much clueless with PHP. Whack a PHP tag on the question though and you might attract the right experts.

Collectives™ on Stack Overflow

How to post json object with Http.post (Angular 2) (php server side)

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related