学习要点：
1.问题所在
2.设置代码
表单的目的就是实现用户的填写和提交，传统的提交需要提交到一个指定页面，需要卸
载当前页面，然后加载到另外一个服务器端页面进行处理，最后再跳转到指定的页面。这种
用户体验不是特别的很好。而 Ajax 则解决这些问题。
一．问题所在
QQ截图20190520092707.png
QQ截图20190520092730.png
二．设置代码
HTML 代码
<span class="loading"></span>
<div id="loading">
<p>加载中</p>
</div>
<div id="success">
<p>成功</p>
</div>
CSS 代码
#reg dl dd span.loading {
background:url(images/loading2.gif) no-repeat;
position:absolute;
top:10px;
left:300px;
width:16px;
height:16px;
display:none;
}
#loading {
position:absolute;
width:200px;
height:40px;
background:url(images/login_header.png);
border-right:solid 1px #ccc;
border-bottom:solid 1px #ccc;
display:none;
z-index:10000;
}
#loading p {
height:40px;
line-height:40px;
background:url(images/loading3.gif) no-repeat 20px center;
text-indent:50px;
font-size:14px;
font-weight:bold;
color:#666;
}
#success {
position:absolute;
width:200px;
height:40px;
background:url(images/login_header.png);
border-right:solid 1px #ccc;
border-bottom:solid 1px #ccc;
display:none;
z-index:10000;
}
#success p {
height:40px;
line-height:40px;
background:url(images/success.gif) no-repeat 20px center;
text-indent:50px;
font-size:14px;
font-weight:bold;
color:#666;
}
JS 代码
if (flag) {
var _this = this;
$('#loading').css('display', 'block').center(200, 40);
$('#loading p').html('正在提交注册中...');
_this.disabled = true;
$(_this).css('backgroundPosition', 'right');
ajax({
method : 'post',
url : 'add.php',
data : serialize($('form').first()),
success : function (text) {
if (text == 1) {
$('#success').css('display', 'block').center(200, 40);
$('#success p').html('注册完成，请登录...');
setTimeout(function () {
screen.animate({
attr : 'o',
target : 0,
t : 30,
step : 10,
fn : function () {
screen.unlock();
}
});
reg.css('display', 'none');
$('#loading').css('display', 'none')
$('#success').css('display', 'none')
$('#reg .succ').css('display', 'none');
_this.disabled = false;
$(_this).css('backgroundPosition', 'left');
$('form').first().reset();
}, 1500);
}
},
async : true
});
}
//判断用户名
function check_user() {
var flag = true;
if (!/[\w]{2,20}/.test(trim($('form').form('user').value()))) {
$('#reg .error_user').html('输入不合法，请重新输入！');
return false;
} else {
$('#reg .loading').css('display', 'block');
$('#reg .info_user').css('display', 'none');
ajax({
method : 'post',
url : 'is_user.php',
data : serialize($('form').first()),
success : function (text) {
if (text == 1) {
$('#reg .error_user').html('用户名已占用！');
flag = false;
} else {
flag = true;
}
$('#reg .loading').css('display', 'none');
},
async : false
});
}
return flag;
}
创建一个数据库
QQ截图20190520092947.png
连接数据库
<?php
header('Content-Type:text/html;charset=utf-8');
//常量参数
define('DB_HOST','localhost');
define('DB_USER','root');
define('DB_PWD','yangfan');
define('DB_NAME','blog');
//第一步，连接 MYSQL 服务器
$conn = @mysql_connect(DB_HOST,DB_USER,DB_PWD) or
die('数据库连接失败，错误信息：'.mysql_error());
//第二步，选择指定的数据库，设置字符集
mysql_select_db(DB_NAME) or die('数据库错误，错误信息：'.mysql_error());
mysql_query('SET NAMES UTF8') or die('字符集设置错误'.mysql_error());
?>
新增用户
<?php
require 'config.php';
$_birthday = $_POST['year'].'-'.$_POST['month'].'-'.$_POST['day'];
//新增用户
$query = "INSERT INTO blog_user (user, pass, ans, ques, email, birthday, ps)VALUES ('{$_POST['user']}', sha1('{$_POST['pass']}'), '{$_POST['ans']}',
'{$_POST['ques']}', '{$_POST['email']}', '{$_birthday}', '{$_POST['ps']}')";
@mysql_query($query) or die('新增错误：'.mysql_error());
echo mysql_affected_rows();
mysql_close();
?>
用户名占用
<?php
require 'config.php';
//在新增之前，要判断用户名是否重复
$query = mysql_query("SELECT user FROM blog_user WHEREuser='{$_POST['user']}'") or die('SQL 错误');
if (mysql_fetch_array($query,MYSQL_ASSOC)) {
echo 1;
}
mysql_close();
?>
网友评论