Formulário PHP com AJAX

kim.y · Janeiro 20, 2018

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;
?>

Omar~ · Janeiro 21, 2018

Eu sempre fico curioso, porque as pessoas usam id e name em forms sem a necessidade? Poderia me esclarecer isso?

Uma vez que ambos são identificadores.

Bem com jQuery facilita tudo, então você pode criar variáveis encapsulando para cada input.

var nome = $('input[name="nome"]').val();
var senha = $('input[name="senha"]').val();
var email = $('input[name="email"]').val();
$.ajax({
    method: 'POST',
    url: 'inserir.php',
    dataType: 'html',
    data: {nome: nome, senha: senha, email: email},
    success: function (data) {
    // Post success
    }
});

Tem uma jeito mais simples veja:

Spoiler


<form method="POST" onsubmit="return enviarPost();">
    <input type="text" name="nome" placeholder="Insira seu nome de usuário..">
    <input type="text" name="senha" placeholder="Insira sua senha..">
    <input type="text" name="email" placeholder="Insira seu email..">
    <input type="submit" value="Enviar">
</form>

A função


function enviarPost() {
    $.ajax({
        method: 'POST',
        url: 'inserir.php',
        dataType: 'html',
        data: $('form').serialize(),
        success: function (data) {
            // Post success
        }
    });
    return false;
}

O método serialize da jQuery já vai enviar todos os valores que estiverem em inputs que estejam identificados com NAME para o arquivo que colocar em url

kim.y · Janeiro 21, 2018

5 horas atrás, Omar~ disse:

Eu sempre fico curioso, porque as pessoas usam id e name em forms sem a necessidade? Poderia me esclarecer isso?

Uma vez que ambos são identificadores.

Bem com jQuery facilita tudo, então você pode criar variáveis encapsulando para cada input.

O método serialize da jQuery já vai enviar todos os valores que estiverem em inputs que estejam identificados com NAME para o arquivo que colocar em url

Eu uso porque vi em um livro que estou lendo sobre ajax, ainda estou iniciando nesse mundo web.

Mas bom saber que não tem a necessidade, tive essa dúvida mas parecia ser uma coisa besta, só uma dúvida, qual dos dois é mais utilizado, tem alguma padrão ou tanto faz?

Quanto ao código, vou testar aqui, valeu man.

kim.y · Janeiro 21, 2018

Agora deu certinho!!

Só para deixar registrado aqui, eu estava usando o link abaixo e por isso não estava conseguindo fazer como o Omar~ falou.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>

Inseri esse:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

e o código dele rodou certinho, não sei se foi coincidência mas deu certo.

Vou dar uma estudada nesse código para tentar entender melhor o que está acontecendo.

Valeu Omar~.

Matheus Tavares · Janeiro 21, 2018

5 horas atrás, Omar~ disse:

porque as pessoas usam id e name em forms sem a necessidade? Poderia me esclarecer isso?

20 minutos atrás, kim.y disse:

Mas bom saber que não tem a necessidade, tive essa dúvida mas parecia ser uma coisa besta, só uma dúvida, qual dos dois é mais utilizado, tem alguma padrão ou tanto faz?

Respondendo:

Especificação W3C para o atributo global id:

Citar

The id attribute specifies its element's unique identifier (ID). The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. [...]

An element's unique identifier can be used for a variety of purposes, most notably as a way to link to specific parts of a document using fragment identifiers, as a way to target an element when scripting, and as a way to style a specific element from CSS.

Especificação W3C para o atributo name no contexto de um input:

Citar

name - Name of form control to use for §4.10.21 Form submission and in the form.elements API

A definição do Form Submission é muito grande para eu colar aqui, mas é explicada aqui: https://www.w3.org/TR/html5/sec-forms.html#forms-form-submission

Resumindo: "id" você usa para idenitificar no DOM. Manipular no JS, no CSS e identificar unicamente o elemento.

"name" tem uma semântica completamente diferente: é utilizada como fonte de dados para Submissão de formulários.

Ambos devem ser usados, cada um em seu contexto.

Como o envio do formulário está sendo feito manualmente por AJAX, e não pela ordem natural do navegador, você precisa definir os dados que são enviados. Do contrário, essa necessidade não existe, pois o form irá automaticamente carregar os inputs definidos (com tuplas name=value).

Sobre isso:

var nome = $('input[name="nome"]').val();
var senha = $('input[name="senha"]').val();
var email = $('input[name="email"]').val();

Sem utilizar o serialize, apontado pelo @Omar~, essa sintaxe não estaria suficientemente boa exatamente pela ausência do id.

Faz muito mais sentido (além de ser muito mais rápido para o navegador) trabalhar com ids, utilizando o ID Selector (no caso do jQuery): $( '#meu-elemento' );

Omar~ · Janeiro 21, 2018

3 horas atrás, Matheus Tavares disse:

Resumindo: "id" você usa para idenitificar no DOM. Manipular no JS, no CSS e identificar unicamente o elemento.

"name" tem uma semântica completamente diferente: é utilizada como fonte de dados para Submissão de formulários.

Ambos devem ser usados, cada um em seu contexto.

Em tese foi isso que quis me referir que cada coisa é cada coisa, no caso aqui em questão o uso o ID é desnecessário. Usar o ID no input seria uma forma de atacar um input em questão.

No entanto para o uso do serialize com jquery é melhor apontar um ID no form para esse tipo de requisição. Hora que se encapsular simplesmente o form sem aponta-lo e tenha mais de um form na página todos os inputs "NAME" pertencentes ou não ao formulário em questão serão processados, fazendo o uso de algo completamente desnecessário.

Matheus Tavares · Janeiro 21, 2018

@Omar~, eu não disse que você estava errado, apenas complementei seu post.

20 minutos atrás, Omar~ disse:

No entanto para o uso do serialize com jquery é melhor apontar um ID no form

É verdade, assim como no exemplo anterior à esse, onde é melhor apontar os IDs dos campos, ao invés de selecioná-los com [name=...].

Foi esse exemplo e as dúvidas do autor do tópico que motivou minha resposta, mas eu entendi o que você quis dizer e concordo com você.

Entrar

Arquivado

Formulário PHP com AJAX

Recommended Posts

kim.y 11

Compartilhar este post

Link para o post

Compartilhar em outros sites

Omar~ 87

Compartilhar este post

Link para o post

Compartilhar em outros sites

kim.y 11

Compartilhar este post

Link para o post

Compartilhar em outros sites

kim.y 11

Compartilhar este post

Link para o post

Compartilhar em outros sites

Matheus Tavares 167

Compartilhar este post

Link para o post

Compartilhar em outros sites

Omar~ 87

Compartilhar este post

Link para o post

Compartilhar em outros sites

Matheus Tavares 167

Compartilhar este post

Link para o post

Compartilhar em outros sites

Consulta SQL dentro de outra consulta

problema em usar json para realizar engenharia de dados

Soma dos dias utilizados

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante