Index.html
Copy codeThe Code is as follows: <Head>
<Title> jQuery Ajax instance demonstration </title>
</Head>
<Script src = "./js/jquery. js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Document). ready (function () {// This is jQueryready. It is like all the main operations in C are included in it.
$ ("# Button_login"). mousedown (function (){
Login (); // click the button with the ID "button_login" to trigger the function login ();
});
});
Function login () {// function login ();
Var username = $ ("# username"). val (); // obtain the username in the box.
Var password = $ ("# password"). val (); // obtain the password in the box.
$. Ajax ({// an Ajax Process
Type: "post", // post communication with the background
Url: "login. php", // communicate with this php page
DataType: 'json', // The value returned from php is interpreted in json format.
Data: 'username = '+ username +' & password = '+ password, // There are two data items sent to php, namely u and p from above
Success: function (json) {// If php is successfully called
// Alert (json. username + '\ n' + json. password); // return the value (json. username) in php to alert.
Certificate ('{result'}.html ("name:" + json. username + "<br/> password:" + json. password); // display the return value in php at the predefined result location
}
});
// $. Post () method:
$ ('# Test_post'). mousedown (function (){
$. Post (
'Login. php ',
{
Username: $ ('# username'). val (),
Password: $ ('# password'). val ()
},
Function (data) // return function
{
Var myjson = '';
Eval ('myjson = '+ data + ';');
Certificate ('{result'}.html ("name 1:" + myjson. username + "<br/> password 1:" + myjson. password );
}
);
});
// $. Get () method:
$ ('# Test_get'). mousedown (function ()
{
$. Get (
'Login. php ',
{
Username: $ ('# username'). val (),
Password: $ ('# password'). val ()
},
Function (data) // return function
{
Var myjson = '';
Eval ("myjson =" + data + ";");
Certificate ('{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> input name: </span> <input type = "text" name = "username" id = "username"/> </p>
<P> <span> enter the password: </span> <input type = "text" name = "password" id = "password"/> </p>
</Form>
<Button id = "button_login"> ajax submit </button>
<Button id = "test_post"> post submission </button>
<Button id = "test_get"> get submit </button>
</Body>
</Html>
Login. phpCopy codeThe Code is as follows: <? Php
Echo json_encode (array ('username' = >$ _ REQUEST ['username'], 'Password' = >$ _ REQUEST ['Password']);
?>