How do I start jquery results in a div?

Question

How do I start jquery results in a div?

Navigation

#1 by (2 votes)
#2 by (2 votes)

2

My js code is working fine but I wanted it to print the result inside a div in the index.html itself under my textarea and without redirecting to another page, since it is redirecting to the ip.php page and showing the results there.

<html>

<head>
<title> testar ips </title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script>functionenviar(){varbin=$("#bin_id").val();
    var linhaenviar = bin.split("\n");
    var index = 0;
    linhaenviar.forEach(function(value){

      setTimeout(

        function(){
          $.ajax({
            url: 'ip.php',
            type: 'POST',
            dataType: 'html',
            data: "bin=" + value,
            success: function(resultado){
              document.write(resultado + "<br>");
          }
        })

      }, 10 * index);

    index = index + 3;

    })
  }
  </script>

</head>

<body>

<center>
<textarea name="ip" id="ip_id" rows="10" cols="40">
</textarea>
<br>
<input type="button" value="testar ips" onclick="enviar();"></input>
</center>
</body>
</html>

php javascript jquery ajax

asked by anonymous 07.07.2017 / 18:43

2 answers

2

You can use the jQuery HTML command in success of your AJAX request:

$('#id_da_minha_div').html(meu_html)

See more info here: link

07.07.2017 / 18:55

How do I check to see if a user has confirmed email with only one query? How to get a class with JQuery array?

score 2 · Accepted Answer

Simple, first create a span or div beneath your textarea with some id .

<span id="msg"> </span>

Within function success you can use the text() function by selecting span:

success: function(){
   $("#msg").text("a mensagem que você quer");
}

A small example for ajax and php requests.

JS

  $("#cadastrar-produtos").on("submit", function(e){
    e.preventDefault();

    var dados = $(this).serialize();
    var url = "cadastrar-produto.php";

    $.ajax({
      url: url,
      type: "POST",
      data: dados,
      dataType: "json",
      success: function(json){
        if (json.status) {
          console.log("success");
          $("#cadastrar").each(function() {
            this.reset();
          });

          iziToast.success({
            title: 'Ok',
            message: json.message,
            icon: "zmdi zmdi-thumb-up"
          });

        } else {
          console.log("error");
          iziToast.error({
            title: 'Erro',
            message: json.message,
            icon: "zmdi zmdi-thumb-down"
          });

        }
      },
      error: function(json){
        iziToast.error({
          title: 'Erro',
          message: "Erro ao fazer requisição",
          icon: "zmdi zmdi-thumb-down"
        });
      }
    });

  });

I'm using a lib called iziToast, to display result alerts.

Php

require_once 'class/Produto.php';
require_once 'class/ProdutoDAO.php';
require_once 'conecta.php';

$nome = $_POST["nome"];
$preco = $_POST["preco"];
$quantidade = $_POST["quantidade"];
$validade = $_POST["validade"];
$descricao = $_POST["descricao"];

$produto = new Produto();
$dao = new ProdutoDAO($conexao);
$produto->setNome($nome);
$produto->setPreco($preco);
$produto->setQuantidade($quantidade);
$produto->setValidade($validade);
$produto->setDescricao($descricao);
try {
    if ($dao->inserir($produto)) {
        $json = array(
            "status" => "true",
            "message" => "Produto inserido com sucesso"
        );
    } else {
        $json = array(
            "status" => "false",
            "message" => "Erro ao inserir produto"
        );
    }
} catch (PDOException $e) {
    $json = array(
            "status" => "false",
            "message" => "Erro ao inserir produto: " . $e->getMessage()
        );
}

echo json_encode($json);

I found it very interesting to create an array, as if it were a json object, to save the status and a message. The status will save if everything happened correctly in my back end, and a message like "Product successfully registered". In my function success I make a if(json.status) if it's true, it's all worked out, and I'll send a custom iziToast for successful messages, otherwise I'll send a custom iziToast for error messages.