How do I use Ajax to send form data in JSON format to REST API in PHP?

Asked

Viewed 92 times

0

I need to send data from a form in JSON format to insert into the database through an API made with PHP. I researched a little and saw that it is possible to solve with Ajax but I am not getting. Follow below my codes:

home php.

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        //EVENTO DE CLICAR NO SUBMIT
        $("#send").click(function(e){
            history.pushState(null, null, "?" + $("form[name=\"formulario\"]").serialize())
            $.ajax({
                url: 'api-create.php',
                type: 'POST',
                dataType: 'json',
                data: $("form[name=\"formulario\"]").serialize()
            })
        })
    </script>
</head>
<body>
    <form name="formulario" method="post">
        <label>Autor: <input type="text" name="autor" value="" required="required"/></label>
        <label>Email: <input type="text" name="email" value="" required="required"/></label>
        <label>Titulo: <input type="text" name="titulo" value="" required="required"/></label>
        <label>Resumo: <input type="text" name="resumo" value="" required="required"/></label>
        <label><button type="button" id="send" name="send"/>Send</button></label>
    </form>
</body>
</html>

api-create.php

<?php

header("Content-Type: application/json");
header("Acess-Control-Allow-Origin: *");
header("Acess-Control-Allow-Methods: POST");
header("Acess-Control-Allow-Headers: Acess-Control-Allow-Headers,Content-Type, 
Acess-Control-Allow-Methods, Authorization");

$data = json_decode(file_get_contents("php://input"), true);

$pautor = $data["autor"];
$pemail = $data["email"];
$ptitulo = $data["titulo"];
$presumo = $data["resumo"];

require_once "dbconfig.php";

$query = "INSERT INTO artigo VALUES (default, '$pautor', '$pemail', '$ptitulo', '$presumo')";

if(mysqli_query($conn, $query) or die("Insert Query Failed")){
    echo json_encode(array("message" => "Product Inserted Successfully", "status" => true));    
}
else{
    echo json_encode(array("message" => "Failed Product Not Inserted ", "status" => false));    
}

?>
php ajax json api rest
  • 1

    "but I’m not getting it", but what is going on? Is there an error? In JS or PHP? Has the request arrived or not? It was sent the way you wanted it to?

  • @Woss the requisition did not arrive and consequently nothing was registered in the bank.

  • 1

    Then go to your browser’s developer tools and check the Console and Network tabs to find out why the request was not made.

1 answer

1

Missed you calling when the gift has been read using $(Document). ready

<script type="text/javascript">
    //EVENTO DE CLICAR NO SUBMIT
$(document).ready(function() {
    $("#send").click(function(e){
        history.pushState(null, null, "?" + $("form[name=\"formulario\"]").serialize())
        $.ajax({
            url: 'api-create.php',
            type: 'POST',
            dataType: 'json',
            data: $("form[name=\"formulario\"]").serialize()
        })
    })
})
</script>

  • Well-observed..

Browser other questions tagged php ajax json api rest

You are not signed in. Login or sign up in order to post.