php ajax post request

Question

I'm trying to do an ajax post request to the file called "sendMail.php". I have no clue what is wrong, I just can't see it.

the js works, it logs the value's from the inputs, in chrome dev tools I can see it is sent to the PHP file... chrome dev tools screen

I'm a bit rusty, last PHP code was about a year ago.

below you'll find my PHP and js code.

folder tree(index.html is the main file where it is operated):

php:

if ($_SERVER['REQUEST_METHOD'] == 'POST'){
   header('Content-Type: application/json');
   $requestbody = file_get_contents('php://input','r');
   $jsonbody = json_decode($requestbody, true);
   $action = $jsonbody['action'];

    switch($action){
        case "sendMail":
            $name = $requestbody->{'name'};
            $gsm = $requestbody->{'gsm'};
            $mail = $requestbody->{'mail'};
            $msg = $requestbody->{'msg'};
            $response = json_encode( '{"naam":"'.$name.'","gsm":"'.$gsm.'","mail":"'.$mail.'"}');
            echo $response;
            break;
    }
}else{
    http_response_code(405);
    header('Content-Type: application/json');
    $response = '{"error":"request method is not allowed."}';
    echo($response);
}
?>

js:

function sendMail(){
    console.log(document.getElementById("mail_naam").value);
    console.log(document.getElementById("mail_gsm").value);
    console.log(document.getElementById("mail_mail").value);
    console.log(document.getElementById("mail_msg").value);
    $.ajax({
        method:'POST',
        url:'mail/sendMail.php',
        dataType:'json',
        data: {
            "action":"sendMail",
            "name":  document.getElementById("mail_naam").value,
            "gsm": document.getElementById("mail_gsm").value,
            "mail":document.getElementById("mail_mail").value,
            "msg": document.getElementById("mail_msg").value
        }
    }).done(function(data) {
        console.log("succes")
        console.log(data);
        var result = JSON.parse(data);
        console.log(result)
    });
}

Answer 1

There is no method parameter in Ajax, so replace it with type .

Try the below code:

$.ajax({
        type:'POST',
        url:'mail/sendMail.php',
        dataType:'json',
        data: {
            "action":"sendMail",
            "name":  document.getElementById("mail_naam").value,
            "gsm": document.getElementById("mail_gsm").value,
            "mail":document.getElementById("mail_mail").value,
            "msg": document.getElementById("mail_msg").value
        }
    }).done(function(data) {
        console.log("succes");
        console.log(data);
        var result = JSON.parse(data);
        console.log(result);
    });

Answer 2

I'm guessing the problem is that $requestbody is always empty. You should use $_POST instead, as source.

$requestbody = $_POST;

Kind of.

php://input Good reference: Description

jQuery ajax

Answer 3

i added this, and this worked:

PHP

  if(empty($action) || $jsonbody){ $action = $_POST['action']; }

  switch ($action) {
      case "sendMail":    
          $name = $_POST["name"];
          $gsm =  $_POST['gsm'];
          $mail = $_POST['mail'];
          $msg =  $_POST['msg'];
          mailVraag($mail,$name,$msg);
          mailVraag("achiel@protoware.be","protoware",$msg . "tel:".$gsm ."email: ".$mail);

          $response = json_encode( '{"naam":"'.$name.'","gsm":"'.$gsm.'","mail":"'.$mail.'"}');
          echo $response;
          break;
  }