1
I have a code that takes the data from a form and sends it to a PHP page via AJAX.
When I try to display JSON data, PHP does not display and only shows square brackets as an array.
HTML:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Cadastro Cliente</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.3.1.js"></script>
<script src="js/popper-min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/envio.js"></script>
</head>
<body>
<div id="principal" class="container mt-5" left="10px">
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>Cadastro Cliente</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="Digite o seu nome:">Nome:</label>
<div class="col-md-4">
<input id="nome" name="Digite o seu nome:" type="text" placeholder="Digite seu nome" class="form-control input-md" required="true">
<span class="help-block">nome</span>
</div>
</div>
<!-- Multiple Radios -->
<div class="form-group">
<label class="col-md-4 control-label" for="Sexo">Sexo</label>
<div class="col-md-4">
<div class="radio">
<label for="Sexo-0">
<input type="radio" name="sexo" id="sexo" value="M" checked="checked">
Masculino
</label>
</div>
<div class="radio">
<label for="Sexo-1">
<input type="radio" name="sexo" id="sexo" value="F">
Feminino
</label>
</div>
</div>
</div>
<!-- Multiple Checkboxes (inline) -->
<div class="form-group">
<label class="col-md-4 control-label" for="interesses">Interesses</label>
<div class="col-md-4">
<label class="checkbox-inline" for="Interesses-0">
<input type="checkbox" name="interesses[]" id="interesses" value="esportes">
Esportes
</label>
<label class="checkbox-inline" for="Interesses-1">
<input type="checkbox" name="interesses[]" id="interesses" value="estudar">
Estudar
</label>
<label class="checkbox-inline" for="Interesses-2">
<input type="checkbox" name="interesses[]" id="interesses" value="videogame">
Video Game
</label>
<label class="checkbox-inline" for="Interesses-3">
<input type="checkbox" name="interesses[]" id="interesses" value="outros">
Outros
</label>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="como">Como nos encontrou ?</label>
<div class="col-md-4">
<select id="como" name="como" class="form-control">
<option value="" selected>Escolher</option>
<option value="Tv">Tv</option>
<option value="amigos">Amigos</option>
<option value="familia">Família</option>
</select>
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="comentarios">Comentários</label>
<div class="col-md-4">
<textarea class="form-control" id="comentarios" name="comentarios">Comente Aqui !!!</textarea>
</div>
</div>
<!-- Button (Double) -->
<div class="form-group">
<label class="col-md-4 control-label" for="enviar">Enviar</label>
<div class="col-md-8">
<button type="submit" id="enviar" name="enviar" class="btn btn-success">Enviar</button>
<button type="reset" id="reset" name="reset" class="btn btn-danger">Resetar</button>
</div>
</div>
</fieldset>
</form>
<span id="resp"></span>
</div>
</body>
</html>
Javascript/Jquery (This is the.js upload):
$(document).ready(function()
{
$('form').submit(function(e){
e.preventDefault();
})
$("#enviar").click(function(){
let cliente = {};
cliente.nome = $("#nome").val(); // pega o nome do cliente
cliente.sexo= $("#sexo:checked").val();// pega o sexo selecionado
cliente.comentarios = $("#comentarios").val();// armazena os comentários
cliente.como = $("#como").val();// armazena o valor do select
let interesses = new Array();
$.each($("#interesses:checked"),function(indice,elemento){
interesses[indice] = elemento.value;
})
cliente.interesses = interesses;
$.ajax({
type:'POST',
url:'php/destino.php',
context:document.body,
data:cliente,
dataType:'json',
success:function(resposta){
console.log(resposta);
$("#resp").attr('style','color:blue');
$("#resp").html(resposta.nome +" "+ "Cadastro feito com sucesso !!");
},
error:function(erro){
console.log(erro);
$("#resp").attr('style','color:red');
$("#resp").html(erro);
}
})
})
})
PHP (destination.php):
<?php
echo json_encode($_POST);
?>
Is this error not happening because you are setting the Content-Type as
json, this MIME type does not exist? Try to reset it asapplication/json. In fact most of the time you don’t need to set it manually, jQuery does it for you.– Andre