Detailed description of jquery ajax-based loose logon methods

Last Update:2018-12-08 Source: Internet

Author: User

Tags mootools

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

The Ajax framework provides a set of modular Ajax functions. The Ajax framework can be implemented in various languages (for example, SAJAX has implementation in various languages). Ajax is only part of jquery,

Instance 1Copy codeThe Code is as follows: $. ajax ({
Type: 'post', // optional get
Url: 'action. php', // The php program that receives data.
Data: 'Data = 'dsa ', // data transmitted to PHP. Use & to connect multiple parameters.
DataType: 'text', // the data type returned by the server can be XML or Json jsonp script html text.
Success: function (msg ){
// Here is the data processing function returned by the PHP program after ajax is submitted successfully. Msg is the returned data. The data type is defined in the dataType parameter!
},
Error: function (){
Processing Function for ajax submission failure!
}
})

PHP action. phpCopy codeThe Code is as follows: <? Php
Echo 'www .jb51.net! ';
?>

Next, let's take a look at the jquery ajax user's unrefresh login instance.

Instance 2Copy 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 returned 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>

Php code

Copy codeThe Code is as follows: <? Php
Echo json_encode (array ('username' = >$ _ REQUEST ['username'], 'Password' = >$ _ REQUEST ['Password']);
?>

Advantages and disadvantages of using jquery ajax

Advantages
Small. After compression, the code is only 20 KB (94 KB without compression code ).
Convenience of Selector and DOM operations: Comparison of jQuery Selector and mootools's Element. Selectors. js, CSS Selector and XPath Selector (deleted after 1.2)
Chaining: always returns a jQuery object, which can be operated continuously.
Documentation is complete and easy to use (each API has a complete example, which is incomparable to other frameworks currently), and there are many other documents and books on the Internet.
JQuery is also widely used, including google code.

Use jQuery site: http://docs.jquery.com/Sites_Using_jQuery
Core development teams and core personnel: John Resig.
Simple and short syntax, easy to remember.
Scalability: There are a lot of user-developed plug-ins available (http://jquery.com/plugins)
JQuery UI (http://jquery.com/plugins/, Based on jquery, but independent of the core jquery) continues to develop.
Friendly and active community: google groups: http://docs.jquery.com/Discussion
There are many convenient methods for event processing, such as click, rather than a single addEvent.

Disadvantages
Because the design concept is efficient and concise, there is no object-oriented extension. The design concept is different from that of Mootools.
The speed of CSS Selector is a little slow (but the speed has been greatly improved)

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More