Real-time registration verification (ajax, jquery)

Source: Internet
Author: User

When registering a user, we will prompt whether the user's information is available in real time. This is the ajax application. I have seen this implementation a long time ago and read it again today, record O (∩ _ ∩) O ha!

I also have this introduction on my original blog ...... Http://hi.baidu.com/%BD%A3%BE%B2%B7%E3/blog/item/a8ddd2eb8a379d00fdfa3c06.html

First introduce the $. get in ajax, because the $. post usage and $. get are similar and will not be introduced (from http://www.w3school.com.cn ):

This is a simple GET request function to replace complex $. ajax. You can call the callback function when the request is successful. To execute a function when an error occurs, use $. ajax.

$(selector).get(url,data,success(response,status,xhr),dataType)
Parameters Description
Url Required. Specifies the URL of the request.
Data Optional. Specifies the data sent to the server together with the request.
Success (response, status, xhr)

Optional. Specifies the function that runs when the request is successful.

Additional parameters:

  • Response-contains the result data from the request
  • Status-contains the Request status
  • Xhr-contains XMLHttpRequest object
DataType

Optional. Specifies the expected server response data type.

By default, jQuery performs intelligent judgment.

Possible types:

  • "Xml"
  • "Html"
  • "Text"
  • "Script"
  • "Json"
  • "Jsonp"

Request the test. php webpage and ignore the returned value:

$.get("test.php");
More Example 1

Send two parameters to the test. php webpage and ignore the returned value:

$.get("test.php", { name: "John", time: "2pm" } );
Example 2

Display the test. php return value (HTML or XML, depending on the return value ):

$.get("test.php", function(data){  alert("Data Loaded: " + data);});
Example 3

Display the return value of test. cgi (HTML or XML, depending on the returned value), add a set of request parameters:

$.get("test.cgi", { name: "John", time: "2pm" },  function(data){    alert("Data Loaded: " + data);  });

The following is my code:

<Head> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <title> User Registration </title> <script type =" text/javascript "src =" jquery/jquery-1.5.2.js "> </script> <script type = "text/javascript"> $ (document ). ready (function () {$ ("# username "). focus (); $ ("# username "). keyup (function () {name = $ ("# username "). val (); // The val () method returns or sets the value of the selected element. If (len (name) <4) // call the following custom len Function ~ \ (Too many rows )/~ $ ("# Username1" ).html ("<font color = red> the registration name must be greater than or equal to 2 Characters </font> "); else $ ("# username1" ).html ("<font color = red> compliant </font>"); // html () method to return or set the content of the selected element (inner HTML ).}); $ ("# Username "). blur (function () {name = $ ("# username "). val (); $. get ("t1.php", {username: name}, function (data) {// determine whether this user name exists in the Database $. get, $. post t1.php in the following if (data = 1) {$ ("# username1" ).html ("<font color = green> compliant </font> ");} else {$ ("# username1" ).html ("<font color = green> occupied </font> ");}});});}); function len (s) {// if the character is a Chinese character, it occupies two var l = 0; var a = s. split (""); for (var I = 0; I <. length; I ++) {if (a [I]. charCodeAt (0) <299) {l ++;} else {l + = 2 ;}} return l ;} </script> 

T1.php:

<? Php $ link = mysql_connect ("localhost", "root", ""); mysql_select_db ("test"); mysql_query ("set names utf8 "); // $ SQL = "select * from user where user = '". $ _ GET ['username']. "'"; // $ result = mysql_query ($ SQL) or die (mysql_error (); $ num = mysql_affected_rows (); if ($ num = 0) $ msg = 1; else $ msg = 0; echo $ msg; // return value mysql_close ($ link);?>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.