Formulário PHP com AJAX
Boa tarde galera,
estou com a seguinte dúvida, eu fiz um form para inserir dados no meu banco de dados via AJAX, ele insere normalmente porém quando faço o teste no arquivo ajax ele não mostra os alerts que eu fiz para testar a rotina.
insert.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="css/css.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="ajax.js"></script>
<style>* {
box-sizing: border-box;
}
input[type=text], select{
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
resize: vertical;
}label {
padding: 12px 12px 12px 0;
display: inline-block;
}input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}/ Clear floats after the columns /
.row:after {
content: "";
display: table;
clear: both;
}/ Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other /
@media (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
</style>
</head>
<body>
<div style="width:50%; margin:140px auto;">
<?php
include "navbar.php"
?>
<div class="container">
<form>
<div class="row">
<div class="col-25">
<label for="fname">Login</label>
</div>
<div class="col-75">
<input type="text" id="nome" name="nome" placeholder="Insira seu nome de usuário.." autocomplete="off">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">Senha</label>
</div>
<div class="col-75">
<input type="text" id="senha" name="senha" placeholder="Insira sua senha.." autocomplete="off">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">Email</label>
</div>
<div class="col-75">
<input type="text" id="email" name="email" placeholder="Insira seu email.." autocomplete="off">
</div>
</div>
<div class="row">
<input type="submit" id="enviar" value="Enviar" style="margin-top:5px;">
</div>
</form>
</div>
ajax.js
$(document).ready(function(){
$('#enviar').click(function(){
$.ajax({
url: 'inserir.php',
type: 'POST',
data: 'nome=' + $('#nome').val() + '&senha=' + $('#senha').val() + '&email=' + $('#email').val(),
success: function(data){
alert("YOUR SUCCESS MESSAGE HERE");
},
error: function (data) {
alert("Error");
}
});
});
})
inserir.php
<?php
$conn = mysqli_connect("localhost", "root","", "banco_teste");
mysqli_select_db($conn, "banco_teste");
$nome = $_POST['nome'];
$senha = $_POST['senha'];
$email = $_POST['email'];
$retorno = 'OLÁ MUNDO!!!';
mysqli_query($conn, "INSERT INTO `usuario`(`nome`, `senha`, `email`) VALUES ('$nome', '$senha','$email')");
if(mysqli_affected_rows($conn) != -1){
$retorno = 'Sucesso!!!';
}
else{
$retorno = 'ERRO!!!';
}
echo $retorno;
?>Discussão (6)
Carregando comentários...