Below are my code : I want to retrieve the data from database using php and using raw javaScript I am not getting any error on screen but the result won't show on the div element .Kindly let me know what is wrong here.
HTML code :
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
User<input type="text" name="enterText" id="enterText">
<input type="button" value="click" id="btn">
<div id="dvID"></div>
<script src="sendData.js"></script>
</body>
</html>
JavaScript code :
var xhr;
if(window.XMLHttpRequest)
{
xhr = new XMLHttpRequest();
}
else
{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
var jsonData= "";
xhr.onreadystatechange =function()
{
if(xhr.readystate==4)
{
console.log("in ready state");
if(xhr.success >=200&& xhr.success <300)
{
consle.log("in sucess");
jsonData = JSON.parse(xhr.responseText);
document.getElementIdById("dvID").innerHTML = jsonData;
console.log("after jsonData "+jsonData);
}
else
{
document.getElementIdById("dvID").innerHTML = "it's not success ";
}
}
}
var element1 = document.getElementById("dvID") ;
console.log(element1);
xhr.open("POST","index.php");
var element = document.getElementById("btn") ;
if(element)
{
element.addEventListener('click',function(){
console.log("just clicked")
xhr.send(document.getElementById("dvID").value);
}) }
and here is my Php code :
<?php
$dbhost = "localhost";
$username = "root";
$password = "";
mysql_connect($dbhost,$username,$password);
@mysql_select_db("trynew") or die(mysql_error());
if (isset($_POST["enterText"])) {
$user = $_POST['enterText'];
echo $user;
}
$query = "SELECT * FROM trynewtable where name = '$user' ";
$result = mysql_query($query);
if($result==FALSE)
{
die(mysql_error());
}
$row = mysql_fetch_array($result);
$jsondata = json_encode($row);
echo $jsondata;
mysql_close();
?>
I tried with both POST and GET method but nothing's working.
There was a bug i changed the data that I am sending to php "xhr.send(document.getElementById("enterText").value);" but still there's nothing on the screen
To get you started with a reusable ajax function and mysqli
<?php
if( $_SERVER['REQUEST_METHOD']=='POST' ){
if( !empty( $_POST['enterText'] ) ){
ob_clean();
/* empty placeholder array for json data */
$output=array();
$text=$_POST['enterText'];
/* db connection using mysqli */
$dbhost = 'localhost';
$dbuser = 'root';
$dbpwd = 'xxx';
$dbname = 'trynew';
/* create the connection */
$db = new mysqli( $dbhost, $dbuser, $dbpwd, $dbname );
/* create the sql with a placeholder rather than embedded variables! */
$sql='select * from `trynewtable` where `name`=?;';
$stmt=$conn->prepare( $sql );
$stmt->bind_param( 's', $text );
$res=$stmt->execute();
if( $res ){
/* Bind EACH field referenced in query and in recordset here!!! */
$stmt->bind_result( $id, $user );
/* Number of fields in recordset = number of bound variables! */
/* Fetch the data */
$stmt->fetch();
/* Add data to output - to be sent as json data */
$output=array(
'id' => $id,
'username' => $user
);
}
/* tidy up */
$stmt->free_result();
$stmt->close();
$db->close();
/* send the response to the ajax callback function */
header( 'Content-Type: application/json', true, 200 );
exit( json_encode( $output ) );
}
}
?>
<!DOCTYPE HTML>
<html>
<head>
<title>Got to have a title</title>
<script type='text/javascript'>
/* basic reusable ajax function */
function ajax(m,u,p,c,o){
/*
m=method,u=url,p=params {n:v},c=callback,o=options {n:v}
*/
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if( xhr.readyState==4 && xhr.status==200 )c.call( this, xhr.response, o, xhr.getAllResponseHeaders() );
};
var params=[];
for( var n in p )params.push(n+'='+p[n]);
switch( m.toLowerCase() ){
case 'post':
p=params.join('&');
break;
case 'get':
u+='?'+params.join('&');
p=null;
break;
}
xhr.open( m.toUpperCase(), u, true );
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send( p );
}
/* create instance of the ajax function */
function bindEvents(e){
document.getElementById('btn').addEventListener('click', function(){ /* this is where you set the different parameters, here we POST `enterText` */
ajax.call( this, 'post', document.location.href, { enterText:document.getElementById('enterText').value }, callback, { dvID:document.getElementById('dvID') } )
}, false );
}
/* callback function to process response from PHP script */
function callback(r,o,h){
if( r ){
/* */
var json=JSON.parse(r);
/* use the callback to process the json data */
o.dvID.innerHTML='Response:'+r;
}
}
/* bind event listeners */
document.addEventListener( 'DOMContentLoaded', bindEvents, false );
</script>
</head>
<body>
User: <input type="text" name="enterText" id="enterText">
<input type="button" value="click" id="btn">
<div id="dvID"></div>
</body>
</html>