Search This Blog

Monday, July 19, 2010

Ajax With Jquery



Include jquery in your head tag


<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript">

</script>

<script>

function getData(){





            jQuery.ajax(

            {

                'url':getData.php, // name of the php file which will give the data

                'data':'user_entered_data'+jQuery('#user_input').attr('id'), // arguments in the get eg: getData.php?user_entered_data=hello in this case

                'success': function(data)

                {

                    jQuery('#results).html(data); // if the control is input tag then use val() instead of html()

                }

            });





}

</script>

Add the following in body

<input type='text' id='user_input'  value=hello />



<div id=results>



</div>



<input type=submit value =submit onclick=getData() />


create a php file getData.php
inside that add the following

$value='Data comes from Ajax call using Jquery'.$_GET[user_entered_data];

//we can use db query also to fetch the data

echo $value; // this will be in the data argument of success function


Click the submit button you can see the change in the div

No comments:

Post a Comment