<title>jquery Ajax Example Demo </title>
<script src= "./js/jquery.js" type= "Text/javascript" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {//This is Jqueryready, it's like the C language main all operations contained inside it
$ ("#button_login"). MouseDown (function () {
Login (); Click the button with ID "Button_login" to trigger the function login ();
});
});
function login () {//functions login ();
var username = $ ("#username"). Val ();//The user name in the Fetch box
var password = $ ("#password"). Val ();//password in the Fetch box
$.ajax ({//an AJAX process
Type: "POST",//post to communicate with the background
URL: "login.php",//Communication with this PHP page
DataType: ' json ',//return value from PHP interpreted in JSON
Data: ' username= ' +username+ ' &password= ' +password,//php to be sent to two items, the above is the U and P
Success:function (JSON) {//If PHP is invoked successfully
Alert (json.username+ ' \ n ' +json.password); Send the return value (json.username) in PHP to alert
$ (' #result '). HTML ("Name:" + json.username + "<br/> Password:" + Json.password); Display the return value in PHP at the predefined result locator location
}
});
$.post () Way:
$ (' #test_post '). MouseDown (function () {
$.post (
' Login.php ',
{
username:$ (' #username '). Val (),
password:$ (' #password '). Val ()
},
function (data)//postback functions
{
var myjson= ';
Eval (' myjson= ' + data + '; ');
$ (' #result '). HTML ("Name 1:" + myjson.username + "<br/> password 1:" + Myjson.password);
}
);
});
$.get () Way:
$ (' #test_get '). MouseDown (function ()
{
$.get (
' Login.php ',
{
username:$ (' #username '). Val (),
password:$ (' #password '). Val ()
},
function (data)//postback functions
{
var myjson= ';
Eval ("myjson=" + Data + ";");
$ (' #result '). HTML ("Name 2:" + myjson.username + "<br/> Password 2:" + Myjson.password);
}
);
});
}
</script>
<body>
<div id= "Result" style= "background:orange;border:1px solid red;width:300px;height:200px;" ></div>
<form id= "formtest" action= "" method= "POST" >
<p><span> Enter Name: </span><input type= "text" name= "username" id= "username"/></p>
<p><span> input Password: </span><input type= "text" name= "password" id= "password"/></p>
</form>
<button id= "Button_login" >ajax submit </button>
<button id= "Test_post" >post submit </button>
<button id= "Test_get" >get submit </button>
</body>
