집 >백엔드 개발 >PHP 튜토리얼 >php+ajax를 이용한 실시간 등록 확인 기능 구현 방법

php+ajax를 이용한 실시간 등록 확인 기능 구현 방법

墨辰丷원래의: 2018-06-01 17:07:381841검색

웹사이트에 등록할 때 사용자 이름을 입력할 때 먼저 비새로고침 확인을 수행해야 합니다. 이 글에서는 주로 php+ajax 등록 실시간 확인 기능을 자세히 소개합니다.

ajax 실시간 확인 기술은 매우 성숙되어 있습니다. 일부 표준화된 웹사이트에는 등록 확인 템플릿이 있는 경우 확실히 ajax 비새로 고침 확인이 포함됩니다. 이는 시기적절하지 못한 사용자 등록 경험에 비해 좋습니다. 백그라운드 비새로고침 도킹의 검증 모드에서는 다시 새로고침으로 돌아가야 하는데, 이는 사용자 경험에 매우 불친절합니다.

ajax 모드는 거의 모든 사이트 애플리케이션에 대한 요구 사항입니다. 새로 고치지 않는 프런트 엔드 검증으로 ajax는 asp+ajax, php+ajax, .net+ajax와 같은 모든 백엔드 언어와 함께 사용할 수 있습니다. 그리고 다른 조합들입니다. 여기서 설명하는 것은 php+ajax의 등록 확인입니다.

다음 검증은 웹사이트에 등록할 때 사용자 이름을 입력할 때 먼저 비새로고침 검증을 수행해야 합니다. 백그라운드 데이터베이스에 동일한 이름이 있는지 확인해야 합니다. 여기에는 총 4개의 파일이 포함되어 있습니다.

ajax.js:Ajax 기술의 핵심 파일입니다. 주로 수시로 확인 메시지를 표시하는 데 사용됩니다. 이 파일은 일반적으로 수정할 필요가 없으며 프런트 엔드에서만 호출하면 됩니다.

var xmlHttp
function 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是增加一个随机数 防止页面启用缓存技术·
geturl=geturl+"&sid="+Math.random()
geturl=encodeURI(geturl);
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:이것은 웹사이트의 구성 파일입니다. 로컬 mysql 사용자 이름과 비밀번호를 구성하려면 PHP와 데이터베이스 간의 연결을 구성해야 합니다. 또한, 수신된 데이터를 실시간으로 처리하여 확인해야 할 문서가 여러 개인 경우 여기에서 다중 승인 및 확인을 수행할 수 있습니다.

<?php
$q=$_GET["q"];
$q = urldecode($q);

if (strlen($q) > 0)
{
 $conn = @mysql_connect("localhost","root","1010") or die ("MySql连接错误");
 mysql_select_db("xin",$conn);
 mysql_query("set names &#39;utf8&#39;");
 
 $sql = "SELECT username FROM message WHERE username = &#39;$q&#39;";
 $query = mysql_query($sql);
 @$row = mysql_fetch_array($query);
 
 if(!empty($row[&#39;username&#39;]))
 {
 $response = "<font color=red>已经被注册！</font>";
 }else
 {
 $response = "<font color=blue>恭喜！可以注册！</font>";
 }
 
 echo $response;
}

?>

index.html:이 파일은 비교적 간단합니다. ajax.js 처리 파일을 호출하고 새로 고침되지 않는 확인을 위해 제출할 파일을 conn에 제출합니다. .php가 배경에 연결됩니다.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="ajax.js"></script> 
</head>
<body bgcolor="#999999">
<center>
<form> 
<table>
 <tr>
 <td>用户名：</td>
 <td><input type="text" id="txt1" onKeyUp="showHint(this.value)"></td>
 </tr>
 <tr align="center">
 <td colspan="2"><span id="txtHint"></span></td>
 </tr>
</table>
</form>
</center>
</body>
</html>

Library.txt:이 파일은 SQL 데이터베이스 파일입니다. 이 파일을 mysql 데이터베이스로 가져오세요.

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;

이러한 파일을 PHP 파일을 실행할 수 있는 루트 디렉터리에 저장하세요. 테스트 URL은 localhost/index.html입니다. 다음은 패키지에 다운로드된 전체 파일 세트입니다. 비밀번호, 이름 등을 추가하는 등 필요한 등록

요약: 위 내용이 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

php+ajax를 이용한 실시간 등록 확인 기능 구현 방법

관련 기사