Create Things and Build Stuff

Ajax jQuery Tutorial PHP. Ajax is a programming technique that makes it possible to do data change with the server in the background, so the web page doesn’t need to refresh in order to change the page partially.
Here we go our hero again, jQuery!. By using jQuery, ajax development process is a lot easier.
In this tutorial we will learn how to implement Ajax using jQuery in our web pages. We will create a project to better understanding the topic.

The Project
In this Ajax jQuery Tutorial PHP project we will create simple form submitting. Whenever users type their name in the form an then submit it by clicking the submit button. Their name will be shown below the input form without page refresh process :D. By Using this technique our web application is feels like desktop application.

ajaxfirst.php

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<html>

<head>

<script type="text/javascript"src="js/jquery-1.7.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#submit").click(function(){

varname=$("#name").val();

$.ajax({

type:"post",

url:"getname.php",

data:"name="+name,

success:function(data){

$("#info").html(data);

}

})

});

});

</script>

</head>

<body>

<form method="post"action="">

Name : <input type="text"name="name"id="name"/>

<input type="button"name="submit"id="submit"value="Submit"/>

</form>

<div id="info" />

</body>

</html>

and following code is responsible in giving the output that needs to be shown. This code will echo “Thank you USER for Register in our site” where USER depends on user’s input.