Jquery + ajax instance

 

 

 

<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>

 

<Div style = "border-bottom: Red 1px solid; border-left: Red 1px solid; width: 300px; Background: orange; Height: 200px; border-top: red 1px solid; border-Right: Red 1px solid;-moz-Background-clip: border;-moz-Background-origin: padding;-moz-Background-inline-policy: continuous "id = Result> & nbsp; </div>

<FORM id = formtest method = post action = ""> <P> <SPAN> input name: </SPAN> <INPUT id = username type = text name = username> </P> <SPAN> enter the password: </SPAN> <INPUT id = password type = text name = password> </P> </FORM>

<BUTTON id = button_login type = submit> ajax submit </BUTTON>

<BUTTON id = test_post type = submit> post submission </BUTTON>

<BUTTON id = test_get type = submit> get submit </BUTTON>