Monday, 11 May 2015

Ajax with jquery basics

Simply take input from user process it in ajax.php file and show out put.
your html code is here -
<html>
<head>
 <script type="text/javascript" src="jquery-1.11.3.min.js">
</script>
 <script type="text/javascript" src="script.js">
</script>
</head>
<body>
<p>Ajax call Back Introduction</p>
Data to sent to server from this box:<br/>
<input type="text" id="input_text" /><br/>
<textarea id="show_text">
</textarea><br/>
<input type="button" id="ajax_call_btn" value="ajax call button"/>
</body>
</html>

your ajax script code is here -

$(document).ready(function(){
          $('#ajax_call_btn').click(function() {
 
          $.post(
             // it takes 3 parameters 1-url 2-inputs from user  3- response
 "ajax.php",
 {
     person_name : $('#input_text').val()
 },
 function(data){
       $('#show_text').val(data);
 
 }
  
  );
 
 }
 
 );


}
);

And finally your ajax.php file code is here --
<?php
      echo "Hello this is call back";
 
 $person_name = $_POST['person_name'];
 echo $person_name;

?>

No comments:

Post a Comment