3
I don’t want my ajax.php page to display anything when accessed by the user’s browser.
AJAX.PHP
<?
$nome = $_POST['nome'];
$email = $_POST['email'];
$senha = $_POST['senha'];
if (!$nome) {echo 'Escreva seu nome!';} else {
if (!$email) {echo 'Escreva seu email!';} else {
if (!$senha) {echo 'Escreva sua senha!';} else {
$conn = new PDO( 'mysql:host=XXX;dbname=XXX', 'XXX', 'XXX', array( PDO::ATTR_PERSISTENT => true ) );
$exe = $conn->prepare("INSERT INTO cliente(nome, email, senha) VALUES (:nome, :email, :senha)");
$exe->bindParam(':nome', $nome);
$exe->bindParam(':email', $email);
$exe->bindParam(':senha', $senha);
$exe->execute();
echo 'Obrigado!';
}
}
}
?>
INDEX.PHP
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Laboratório Social</title>
<style>
* {
font-family: arial, sans-serif;
font-size: 18px;
font-weight: 100;
margin: auto;
cursor: default;
border: none;
}
body {
text-align: center;
margin: 0;
padding: 0;
}
input {
display: block;
outline: none;
}
input:-webkit-autofill {
-webkit-box-shadow:0 0 0 50px #09f inset;
-webkit-text-fill-color: #000;
}
textarea {
outline: none;
resize: none;
}
#submit {
font-size: 32px;
margin: 10px auto;
width: 316px;
background-color: #09f;
cursor: pointer;
padding-top: 5px;
padding-bottom: 5px;
}
#nometexto {
margin: 10px auto 10px auto;
background-color: #09f;
width: 316px;
padding-top: 5px;
padding-bottom: 5px;
font-size: 20px;
}
#emailtexto {
margin-top: 10px;
margin-bottom: 10px;
background-color: #09f;
width: 316px;
padding-top: 5px;
padding-bottom: 5px;
font-size: 20px;
}
#senhatexto {
margin-top: 10px;
margin-bottom: 10px;
background-color: #09f;
width: 316px;
padding-top: 5px;
padding-bottom: 5px;
font-size: 20px;
}
#nome {
background-color: #09f;
cursor: text;
padding: 10px;
width: 296px;
}
#email {
background-color: #09f;
cursor: text;
padding: 10px;
width: 296px;
}
#senha {
background-color: #09f;
cursor: text;
padding: 10px;
width: 296px;
}
#details {
margin: 10px;
}
</style>
</head>
<body>
<h4 id="nometexto">Nome</h6>
<input type="text" id="nome">
<h4 id="emailtexto">Email</h6>
<input type="email" id="email" autocomplete="off">
<h4 id="senhatexto">Senha</h6>
<input type="password" id="senha">
<input type="submit" id="submit" value="Registrar">
<p id="details"></p>
<script async defer>
document.getElementById("submit").onclick = function() {
var nome = document.getElementById("nome").value;
var email = document.getElementById("email").value;
var senha = document.getElementById("senha").value;
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("details").innerHTML = xmlhttp.responseText;
if (xmlhttp.responseText == "Obrigado!") {
document.getElementById("nome").value= "";
document.getElementById("senha").value= "";
document.getElementById("email").value= "";
}
}
}
xmlhttp.open("POST","ajax.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("nome=" + nome + "&email=" + email + "&senha=" + senha);
};
</script>
</body>
</html>
Behold this question, can be applied to your context as well.
– Paulo Rodrigues
It didn’t work, when I did that ajax also failed to communicate with php.
– user27503
It detects ajax as if it were user tbm.
– user27503
You also set the header with
setRequestHeader
, as shown in the second answer of the question I indicated? After this, I updated your question with the new code if you are unsuccessful.– Paulo Rodrigues
How do I do that?
– user27503
To do as @Paulorodrigues said you should put this
xmlhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");
afterxmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
– Leandro Amorim