Home >Backend Development >PHP Tutorial >How to use ajax in PHP to create a login page, verify whether the user name is available, and dynamically call the database
How to use ajax in PHP to create a login page, verify whether the user name is available, and dynamically call the database
- 一个新手Original
- 2017-10-09 09:26:311472browse
1.Basic knowledge of ajax
ajax is a comprehensive application technology extended by combining jquery, php and other technologies. It is not new content. Ajax is also written in the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag.
If you use ajax, you must have a processing page. The processing page only operates the database and returns values. The pages are all processed by ajax.
2. Use ajax to create the login page denglu.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../jquery-1.11.2.min.js"></script>
<title>无标题文档</title>
</head>
<body>
<p>用户名：<input type="text" id="uid" /></p>
<p>密码：<input type="text" id="pwd" /></p>
<p><input type="button" value="登录" id="btn" /></p>
</body>
<script type="text/javascript">$(document).ready(function(e) {
$("#btn").click(function(){//给按钮加点击事件
//取用户名和密码
var u = $("#uid").val();//取输入的用户名
var p = $("#pwd").val();//取输入的密码
//调ajax
$.ajax({
url:"dengluchuli.php",
data:{u:u,p:p},//第二个u和p只是变量，可以随意写，dengluchuli.php里面的u和p都是第一个。
type:"POST",
dataType:"TEXT",
success: function(data){ if(data.trim()=="OK")//要加上去空格，防止内容里面有空格引起错误。 {
window.location.href="main.php";//js跳转页面，要记住。 } else
{ echo("用户名或密码错误");
}
}
});
})
});</script>
</html>The login processing page dengluchuli.php
<?php
$uid = $_POST["u"];
$pwd = $_POST["p"];
include("./DBDA.class.php");
$db = new DBDA();
$sql = "select password from login where username='{$uid}'";
$mm = $db->StrQuery($sql,0);
if($mm == $pwd && $pwd!="")
{
echo "OK";
}
else
{
echo "NO";
}3. Use ajax Verify whether the user name is available testuid.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../jquery-1.11.2.min.js"></script>
<title>无标题文档</title>
</head>
<body>
<input type="text" id="uid" />
<span id="ts"></span>
</body>
<script type="text/javascript">
$("#uid").blur(function(){//blur表示失去焦点时触发
//取用户名
var uid = $("#uid").val();
//调ajax
$.ajax({
url:"uidchuli.php",
data:{u:uid},
type:"POST",
dataType:"TEXT",
success: function(data){
if(data>0)
{
$("#ts").html("该应户名已存在");
$("#ts").css("color","red");
}
else
{
$("#ts").html("该应户名可用");
$("#ts").css("color","green");
}
}
});
})
</script>
</html>Process page uidchuli.php
##
<?php
$uid = $_POST["u"];
include("./DBDA.class.php");
$db = new DBDA();
$sql = "select count(*) from login where username=' {
$uid
}
'";
echo $db->StrQuery($sql,0);The effect is as shown: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../jquery-1.11.2.min.js"></script>
<title>无标题文档</title>
</head>
<body>
<br />
<p>
<input type="text" id="name" />
</p>
<p id="list"></p>
</body>
<script type="text/javascript">$("#name").keyup(function(){ //取名称
var n = $(this).val(); if(n!="")
{ //调ajx
$.ajax({
url:"listchuli.php",
data:{n:n},
type:"POST",
dataType:"TEXT",
success: function(data){ var sz = data.split("|");
var str = "";
for(var i=0;i<sz.length;i++)
{
str = str+"<p class='l'>"+sz[i]+"</p>";
}
$("#list").html(str);
}
});
} else
{
$("#list").html("");
}
})</script>
</html>Processing page listchuli.php<?php
$name = $_POST["n"];
include("./DBDA.class.php");
$db = new DBDA();
$sql = "select areaname from chinastates where areaname like'% {
$name
}
%'";
echo $db->StrQuery($sql,0);The effect is as shown in the figure: 
The above is the detailed content of How to use ajax in PHP to create a login page, verify whether the user name is available, and dynamically call the database. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Introduction to the method of determining the image format of file upload in PHPNext article：Introduction to the method of determining the image format of file upload in PHP