How to query the DB without refresh and write the returned data?

Question

I need to query my database with something like AJAX/JSON I’m not sure and return the result within a div next to this map. There already exists a div next to receive the result of the consultation.

I’m not sure how I can start doing this but I created the PHP script that will make the query, follows:

<?php

require("conexao.php");

$estado     = $_GET['b_estado'];
$ret        = mysql_query("SELECT post_content FROM wp_posts WHERE post_type = 'estados' AND post_title = '$estado' AND post_status = 'publish'");

$array     = mysql_fetch_assoc($ret);
$dados     = $array['post_content'];

json_encode($dados);

?>

How to make this action be fired with the following script in jQuery?

$("#map li a").on("click", function(e) {
e.preventDefault();

    var estado = $(this).attr("id");
    var b_estado = estado.toUpperCase();

});

Answer 1

Put this code inside some Function that will be called to do what you want, remember to extract from the Response the data you want.

I haven’t tested the code but that’s basically what you have to do, anything you make a few adjustments, if you want I can give an improved answer later:

var url = "seuArquivo.php";
var data = b_estado;
$.ajax({                 
        type: 'POST',                 
        //dataType: 'json',                 
        url: url,                 
        async: true,                 
        data: data,                 
        success: function(response) {
            $("#idSuaDiv").val(response);
            //vc pode fazer outras coisas aqui com a resposta
        }             
    });

Answer 2

This code that follows allows the above mentioned query to be made in the database and return the requested data through AJAX.

$("#map li a").on("click", function(e) {
e.preventDefault();

    // Recupero os dados para enviar para a consulta
    var estado = $(this).attr("id");
    var b_estado = estado.toUpperCase();

        // Faço uma requisição AJAX para tratar o script PHP
        $.ajax  ({  type: "POST", 
            url         : "consulta_estados.php",
            data        : { b_estado: b_estado },
            dataType    : "html",
            success     : function(result){ 
                $("#infos_atendimento").html(result);   
            }

    }); // AJAX

}); // CLICK

The PHP script that runs and returns the data is this:

<?php

header("Content-Type: text/html; charset=UTF-8", true);
require("conexao.php");

$estado     = $_POST['b_estado'];

if( isset($_POST['b_estado']) ){

    $ret            = mysql_query("SELECT post_content FROM wp_posts WHERE post_type = 'estados' AND post_title = '$estado' AND post_status = 'publish'");
    $contador       = mysql_num_rows($ret);
    $array      = mysql_fetch_assoc($ret);
    $dados      = $array['post_content'];       

if($contador > 0){  
    $resposta   = utf8_encode($array['post_content']);  
} else {    
    $resposta   = "Os dados solicitados não existem";   
}

echo $resposta;

}

?>