Real-time verification of php + ajax registration and phpajax real-time verification
The real-time ajax verification technology is very mature. On some standardized websites, if there is a registration verification template, it will certainly involve no refreshing ajax verification, this is a great experience in user registration. Compared to a verification mode that cannot be connected to the backend in a timely manner, the verification mode should be refreshed by returning it again. For users, the experience is unfriendly.
The ajax mode is almost the requirement of all site applications. As a front-end without refreshing verification, ajax can be used in combination with all background languages, suchAsp + ajax, php + ajax,. net + ajaxAnd so on. Here we mainly explain the registration and verification of php + ajax.
The following verification is a complete example. When we register on the website, when entering the user name, we must first perform a non-refreshing verification to verify whether there is data with the same name in the background database, if the user name already exists, the prompt that the user name is occupied is not displayed. Four files are involved.
Ajax. js:The core file of ajax technology is the display of verification prompts from time to time. This file usually does not need to be modified and only needs to be called by the front-end.
Var xmlHttpfunction showHint (str) {if (str. length = 0) {document. getElementById ("txtHint "). innerHTML = "" return} xmlHttp = GetXmlHttpObject () if (xmlHttp = null) {alert ("Browser does not support HTTP Request") return} xmlHttp. onreadystatechange = stateChanged var geturl = "conn. php? Q = "+ str // sid is to add a random number to prevent the page from enabling caching technology. geturl = geturl +" & sid = "+ Math. random () geturl = encodeURI (geturl); xmlHttp. open ("GET", geturl, true) xmlHttp. send (null)} function stateChanged () {if (xmlHttp. readyState = 4 | xmlHttp. readyState = "complete") {document. getElementById ("txtHint "). innerHTML = xmlHttp. responseText} function GetXmlHttpObject () {var xmlHttp = null; try {// Firefox, Opera 8.0 +, Safari xmlHttp = new XMLHttpRequest ();} catch (e) {// Internet Explorer try {xmlHttp = new ActiveXObject ("Msxml2.XMLHTTP");} catch (e) {xmlHttp = new ActiveXObject ("Microsoft. XMLHTTP ") ;}} return xmlHttp ;}
Conn. php:This is the configuration file of the website. to configure your local mysql user name and password, you must configure the connection between PHP and the database. For details, refer to the article on connection between PHP and MYSQL databases, in addition, to process the received data for real-time display, if there are multiple files to be verified, here you can perform multiple acceptance and verification.
<? Php $ q = $ _ GET ["q"]; $ q = urldecode ($ q); if (strlen ($ q)> 0) {$ conn = @ mysql_connect ("localhost", "root", "1010") or die ("MySql connection error"); mysql_select_db ("xin", $ conn ); mysql_query ("set names 'utf8'"); $ SQL = "SELECT username FROM message WHERE username = '$ Q'"; $ query = mysql_query ($ SQL ); @ $ row = mysql_fetch_array ($ query); if (! Empty ($ row ['username']) {$ response = "<font color = red> already registered! </Font> ";}else {$ response =" <font color = blue> congratulations! Yes! </Font> ";}echo $ response ;}?>
Index.html:This is the front-end file, which is relatively simpler and calls ajax. the js processing file will be submitted to the conn. connect php to the background.
<Html>Database .txt:This is the SQL database file. Just import this file to the mysql database.
DROP DATABASE IF EXISTS `xin`;CREATE DATABASE `xin` /*!40100 DEFAULT CHARACTER SET utf8 */;USE `xin`;CREATE TABLE `message` ( `id` int(11) NOT NULL auto_increment, `username` varchar(20) default NULL, PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;Save these files to the root directory where you can run the PHP file. The test URL is localhost/index.html. below is the complete package and download file, and try to change it to the registration module as needed, for example, add a password or a name.
Source code download: http://xiazai.jb51.net/201607/yuanma/php+ajaxzhuce (jb51.netw..rar
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
