Send form with ajax and return errors in a div

Question

I am using some libraries of Boostrap, as the one of the balloons of Alert, and would like to show them depending on the result AJAX, how can I send a post with AJAX and return the errors/successes on Divs, in this case it is better to return in JSON or Plain text, since the errors are independent?

<form action="" method="post">
<input type="text" name="teste" />
<input type="submit" name="post" />
</form>

The back-end part (PHP) is already done, and would return JSON, ex:

Error: JSON => {"error":"1","name":"incorrect"}

<div class="alert alert-danger fade in">
<p>O form contém erros bla bla</p>
</div>

Hit: JSON => {"error":"0"}

<div class="alert alert-success fade in">
<p>Salvo com sucesso!</p>
</div>

Answer 1

According to your return you can show success messages, attention, error or any other you wish.

Example:

var msg = function(alerta, texto) {
  var resposta = '';
  $(".resposta").empty();

  switch (alerta) {
    case 'sucesso':
      resposta = "<div class='alert msg btn-success text-center' role='alert'>" +
        "   <a href='#' class='close' data-dismiss='alert' aria-label='Close'>&times;</a>" + texto + "</div>";
      break;
    case 'atencao':
      resposta = "<div class='alert msg btn-warning text-center' role='alert'>" +
        "   <a href='#' class='close' data-dismiss='alert' aria-label='Close'>&times;</a>" + texto + "</div>";
      break;
    case 'erro':
      resposta = "<div class='alert msg btn-danger text-center' role='alert'>" +
        "   <a href='#' class='close' data-dismiss='alert' aria-label='Close'>&times;</a>" + texto + "</div>";
      break;
    default:
      console.warn('Opção de alerta inválido.');
  }

  $(".resposta").append(resposta);

  $(".msg").click(function() {
    $(this).hide();
  });
};

$("#sucesso").click(function() {
  msg('sucesso', "Mensagem de sucesso!");
});


$("#atencao").click(function() {
  msg('atencao', "Mensagem de atenção!");
});


$("#erro").click(function() {
  msg('erro', "Mensagem de erro!");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="resposta"></div>

<button type="button" id="sucesso" class="btn btn-success">Sucesso</button>
<button type="button" id="atencao" class="btn btn-warning">Sucesso</button>
<button type="button" id="erro" class="btn btn-danger">Sucesso</button>

Answer 2

I usually wear something like this:

<div id="alertaConflito" style="display:none;"><a href="javascript:void(0);">
    <strong id="vaimsg"></strong>
</a></div>

Javascript:

jQuery("#vaimsg").html("Mensagem de Erro ou Sucesso");
$("#alertaConflito").show("fast");

Answer 3

I always do like this:

$.ajax({
    method: 'POST',
    url: 'http://suaUrl.com',
    data: {
        nomeValor: 'Valor para enviar para o servidor',
        outroValor: 133434
    },
    success: function(data) {
        if(data.error === 1) {
            alert("Nome: " + data.nome);
        } else if(data.error === 0) {
            alert("Nenhum erro encontrado");
        }
    },
    error: function(xhr) {
        alert(xhr.status);
    }
});