how to use ajax in wordpress to show database columns using php and Json
<p>I'm new using ajax and I have a code to display from wordpress some information from database columns.
I have this PHP code to connect with the database and create the JSON file:</p>

<pre><code>&lt;?php    
$username = $_REQUEST['username']; 
$password = $_REQUEST['password'];    

if (isset($username) &amp;&amp; isset($password)) {
//CONEXION
    $host="localhost";
    $user="DB_Username";
    $pass="DB_Password";
    $dbname="DB_Name";

//Conexion
$conexion = mysqli_connect($host, $user, $pass,$dbname) 
or die("unexpected error");

//gWe made the search
$sql = "SELECT * FROM Column WHERE A_Login='$username'";
mysqli_set_charset($conexion, "utf8"); 

if(!$result = mysqli_query($conexion, $sql)) die();

$clients = array();

$num_result = mysqli_num_rows($result);

    if ($num_result == 0) {
        $clients = array("error" =&gt; "true", "msg" =&gt; "We can't found this user", "data" =&gt; $username);
    } else {
        while($row = mysqli_fetch_array($result)) 
        { 
            $id=$row['ID'];
            $Name=$row['Name'];

            if ($row['A_Login'] == $username &amp;&amp; $row['A_Password'] == $password){        
                $clients[] = array('id'=&gt; $id, 'Name'=&gt; $Name);
                } else {
                    $clients[] = array('error'=&gt; "true", "msg" =&gt; "Incorrect data");
                    }

        }
    }

$close = mysqli_close($conexion) 
or die("Unespected error with DB");
  }
else {
    $clients = array("error" =&gt; "true", "msg" =&gt; "You must fill all fields", "username" =&gt; $username);
}   
//We build the JSON
$json_string = json_encode($clients);
echo $json_string;

?&gt;
</code></pre>

<p>In a wordpress page I have this code, I build a form where if the user click the submit button call doLogin()  </p>

<pre><code>&lt;script type="text/javascript"&gt; function doLogin(){
    data = {username: jQuery("#user").val(), password: jQuery("#pass").val()}
    console.log(data);
    jQuery.ajax({
    type: "POST",
    url: "Mywebsiteurl.php",
    data: data,
    beforeSend: function(){

    },
    success: function(data){
        console.log(data);
        //var arr = JSON.parse(data);
        //$('#forma').html(data);

    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert("Error");
        console.log(textStatus);
        console.log(errorThrown);
    }
});
} &lt;/script&gt;
</code></pre>

<p>I need to show in <code>&lt;div id="forma"&gt;</code> a kind of list usign html, for example: </p>

<p>Id: VALUE ID
Name: VALUE NAME</p>

<p>and more information...</p>

<p>When i try to print in my website the required information using <code>$('#forma').html(data);</code> I obtain error or just an empty space.</p>

<p>How can I fix it? thanks.</p>