ajax有关的问题:
1: 通过事件或定时器触发
2:表单的提交按钮类型不能是submit,form元素内不用填写method和action
3:调用:
button.onclick = function(){
ajax({
method : 'post', //以post方式提交数据
url : 'blog.php', //提交到的地址,在blog.php里处理数据
data : serialize(form), //表单数据 表单序列化
success : function (text) { //表单提交按钮type属性一定不要是submit
// 回调函数
if(text==1){
//blog.php里的操作执行成功后
alert('发文成功');
//从数据库里查找信息
ajax({
method : 'post', //以post方式提交数据
url : 'get_blog.php', //提交到的地址
data : {}, //获取数据
success : function (text) { //表单提交按钮type属性一定不要是submit
// 回调函数,将返回来的json数据接收过来
var json = JSON.parse(text);
var html = '';
for(var i = 0;i<json.length;i++){ //循环获取所有数据
html += '<div class="content"><h2><em>'+json[i].date+'</em>'+json[i].title+'</h2><p>'+json[i].content+'</p></div>';
}
index.innerHTML = html; //显示数据
},
async : true //一异步
});
// 可以在这里设置一些特性 例如:设置cookie,显示用户名,但是刷新后会消失,onload加载时判断是否存在cookie
}
},
async : true //一异步
});
}
4:blog.php:数据并写入数据库接收
<?php
// 发表文章
//常量参数
define('DB_HOST','localhost'); //主机名
define('DB_USER','blog'); //数据库用户名
define('DB_PWD','lmm13637064637'); //数据库密码
define('DB_NAME','blog'); //要连接的数据库的名称
//连接mysql服务器
$conn=@mysql_connect(DB_HOST,DB_USER,DB_PWD)or die('数据库连接失败;'.mysql_error());
//选择指定的数据库,设置字符集
@mysql_select_db(DB_NAME)or('数据库错误:'.mysql_error());
@mysql_query('SET NAMES UTF8')or die('字符集设置错误:'.mysql_error());
$query="INSERT INTO blog_blog(title,content,date)VALUES('{$_POST['title']}','{$_POST['content']}',NOW())";
mysql_query($query)or die('新增失败!'.mysql_error());
echo mysql_affected_rows(); //回掉函数
mysql_close(); //关闭数据库
?>
5:get_blog.php:查找数据并获取
<?php
// 显示文章
//常量参数
define('DB_HOST','127.0.0.1'); //主机名
define('DB_USER','blog'); //数据库用户名
define('DB_PWD','lmm13637064637'); //数据库密码
define('DB_NAME','blog'); //要连接的数据库的名称
//连接mysql服务器
$conn=@mysql_connect(DB_HOST,DB_USER,DB_PWD)or die('数据库连接失败;'.mysql_error());
//选择指定的数据库,设置字符集
@mysql_select_db(DB_NAME)or('数据库错误:'.mysql_error());
@mysql_query('SET NAMES UTF8')or die('字符集设置错误:'.mysql_error());
// 从中提取三条数据
$query = mysql_query("SELECT title,content,date FROM blog_blog ORDER BY date DESC LIMIT 0,3")or die('SQL错误'.mysql_error());
$json = '';
// 循环得到所有数据并转换为json字符串,并返回
while (!!$row = mysql_fetch_array($query,MYSQL_ASSOC)) {
$json .= json_encode($row).','; //将所有数据转化为json字符串,每条数据以逗号隔开因为用转化成js能用的对象形式,最后多了个逗号
// {"title":"123","content":"12","date":"2018-06-10 10:04:23"},{"title":"12","content":"1212","date":"2018-06-10 09:32:31"}
}
echo '['.substr($json,0,strlen($json)-1).']'; //去除最后一个逗号并转化为数组
mysql_close();
?>
5:同一个php文件对于不同事件进行不同的操作:
只需要在ajax data对象里传入一个参数区分
js:
ajax({
method : 'post', //以post方式提交数据
url : 'get_skin.php', //提交到的地址
data : {
'type':'set',
'big_bg':this.getAttribute("big_bg")
},
php:
if($_POST['type']=='set'){
// 让原来的图片bg_flag 变成 0
$query = mysql_query("UPDATE blog_skin SET bg_flag = 0 WHERE bg_flag = 1")or die('SQL错误'.mysql_error());
// 让传来的图片作为默认图片
$query = mysql_query("UPDATE blog_skin SET bg_flag = 1 WHERE big_bg='{$_POST['big_bg']}'")or die('SQL错误'.mysql_error());
}
6:步骤3中不仅要在自己发表成功后显示,而且只要加载js就应该显示,所以还要下载onload里,ajax是在事件下触发,不然就失去了意义。
7:虽然发表成功后立即显示,但是别人要刷新才能进入,或者在你发表成功后进入的用户才能看到,因为只在onload事件下,和发表成功的事件下才更新数据,如果想发表成功后别人不用刷新也能看到就要在onload下的ajax添加个定时器,比如0.5秒更新一下数据,这样发表成功后别人也能立即看到,但这样有一个缺点就是无论你有没有发表文章它都是每隔0.5秒从数据库里查找并更新数据大大地增加了数据库服务器的压力,也是ajax的缺点之一。