49.项目 1-博客前端：封装库--Ajax 发文

学习要点：

1.问题所在
2.设置代码

一．问题所在

QQ截图20190520093549.png

二．设置代码

//HTML 代码
<div id="blog">
<h2><imgg src="images/close.png" alt="" class="close" />发表博文</h2>
<form name="blog">
<div class="info"></div>
<dl>
<dd>标 题：<input type="text" name="title" class="title" /> (*不可为空)</dd>
<dd><span style="vertical-align:85px">内 容：</span>
<textarea name="content" class="content"></textarea>
<span style="vertical-align:45px">(*不可为空)</span></dd>
<dd style="padding:10px 0 0 80px;">
<input type="button" name="sub" class="submit" /></dd>
</dl>
</form>
</div>
<div id="index">
<span class="loading"></span>
</div>

//CSS 代码
#index {
width:630px;
height:570px;
float:right;
position:relative;
}
#index div.content {
opacity:0;
filter:alpha(opacity=0);
}
#index div.content h2 {
width:628px;
height:30px;
line-height:30px;
font-size:14px;
background:url(images/side_h.png);
text-indent:10px;
border:1px solid #ccc;
border-bottom:none;
margin:0;
}
#index div.content h2 em {
float:right;
font-style:normal;
font-weight:normal;
padding:0 10px 0 0 ;
}
#index div.content p {
height:130px;
line-height:150%;
text-indent:26px;
padding:10px;
border:1px solid #ccc;
margin:0 0 10px 0;
overflow:hidden;
}
#index span.loading {
position:absolute;
top:260px;
left:260px;
width:100px;
height:20px;
background:url(images/loading4.gif) no-repeat;
}
#blog {
width:580px;
height:320px;
border:1px solid #ccc;
position:absolute;
display:none;
z-index:9999;
background:#fff;
}
#blog h2 {
height:40px;
line-height:40px;
text-align:center;
font-size:14px;
letter-spacing:1px;
color:#666;
background:url(images/login_header.png) repeat-x;
margin:0;
padding:0;
border-bottom:1px solid #ccc;
cursor:move;
}
#blog h2 img {
float:right;
position:relative;
top:14px;
right:8px;
cursor:pointer;
}
#blog div.info {
padding:15px 0 5px 0;
text-align:center;
color:maroon;
}
#blog dl {
padding:0 0 0 10px;
}
#blog dl dd {
padding:10px;
font-size:14px;
}
#blog dl dd input.title {
width:200px;
height:25px;
border:1px solid #ccc;
background:#fff;
font-size:14px;
color:#666;
}
#blog dl dd textarea.content {
width:360px;
height:100px;
max-width:360px;
max-height:100px;
background:#fff;
border:1px solid #ccc;
color:#666;
}
#blog dl dd input.submit {
width:107px;
height:33px;
background:url(images/blog_button.png) no-repeat left;
border:none;
cursor:pointer;
}

//JS 代码
$('form').eq(2).form('sub').click(function () {
if (trim($('form').eq(2).form('title').value()).length <= 0
|| trim($('form').eq(2).form('content').value()).length <= 0) {
$('#blog .info').html('发表失败：标题或内容不得为空！');
} else {
var _this = this;
_this.disabled = true;
$(_this).css('backgroundPosition', 'right');
$('#loading').show().center(200, 40);
$('#loading p').html('正在发表博文...');
ajax({
method : 'post',
url : 'add_blog.php',
data : $('form').eq(2).serialize(),
success : function (text) {
$('#loading').hide();
if (text == 1) {
$('#blog .info').html('');
$('#success').show().center(200, 40);
$('#success p').html('发表成功...');
setTimeout(function () {
$('#success').hide();
$('#blog').hide();
$('form').eq(2).first().reset();
screen.animate({
attr : 'o',
target : 0,
t : 30,
step : 10,
fn : function () {
screen.unlock();
}
});
_this.disabled = false;
$(_this).css('backgroundPosition', 'left');
}, 1500);
}
},
async : true
});
}
});
$('#index .loading').show();
$('#index .content').opacity(0);
ajax({
method : 'post',
url : 'get_blog.php',
data : {},
success : function (text) {
$('#index .loading').hide();
var json = JSON.parse(text);
var html = '';
for (var i = 0; i < json.length; i ++) {
html += '<div class="content"><h2>' + json[i].title +
'</h2><p>' + json[i].content + '</p></div>';
}
$('#index').html(html);
for (var i = 0; i < json.length; i ++) {
$('#index .content').eq(i).animate({
attr : 'o',
target : 100,
t : 30,
step : 10
});
}
},
async : true
});

//发表博文
<?php
require 'config.php';
$query = "INSERT INTO blog_blog (title, content, date)
VALUES ('{$_POST['title']}', '{$_POST['content']}', NOW())";
mysql_query($query) or die('新增失败！'.mysql_error());
//sleep(3);
echo mysql_affected_rows();
mysql_close();
?>
//获取博文列表
<?php
require 'config.php';
$query = "SELECT id,title,content,date FROM blog_blog ORDER BY date DESC
LIMIT 0, 3";
$result = @mysql_query($query) or die('SQL 错误：'.mysql_error());
while (!!$row = mysql_fetch_array($result,MYSQL_ASSOC)) {
$json .= json_encode($row).',';
}
sleep(3);
echo '['.substr($json, 0, strlen($json) - 1).']';
mysql_close();
?>

感谢收看本次教程！