ajax基础

本文讲的内容将基于jquery框架,jquery是js框架,已经帮我们封装了ajax方法

ajax简介

ajax其实就是后台的一次http请求,相当于在后台你get了一个页面或者post了一次数据,服务器对这次请求做出反应并且返回数据。

我们用以前的message那个例子,本来是页面post的现在改成ajax提交并且刷新页面。我的例子里面有引入其他文件,在以前的文章里面可以找到http://www.qaforcode.net/archives/442

页面展示部分和原本没啥差别,主要是form表单里面需要修改几个地方

1、form不再提交了,使用ajax提交

2、提交成功以后刷新列表

好了看下例子吧,message.php里面

<?php
//引入mysql类
include_once(dirname(__FILE__)."/lib/init.php");
//创建一个mysql操作实例
$db = new mysql();

$pagesize = 5;

$page = $_GET['page'];

if($page<=0)
  $page = 1;

$result = $db->query("select count(*) from message");
$total = $db->fetch_row($result);
$total = $total[0];

// 查询所有的留言
$query = sprintf("SELECT * FROM message order by id desc limit %s,%s",($page-1)*$pagesize,$pagesize);

$result = $db->query($query);

$message = array();
while ($line = $db->fetch_array($result)) {

  $messages[] = $line;//取出数据
}

?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script> <!-- 导入jquery -->
<title>php留言板</title>
</head>
<style>
.page  a{padding:5px;display:inline-block;border:1px solid #ccc;background:#ccc;color:#fff;}
.page .cur{background:white;color:#000;}
</style>
<body>
 <table cellpadding="0" cellspacing="0" width="500px;" border="1">
<tr class="first"><td style="width:30px;">ID</td><td style="width:50px;">姓名</td><td>留言</td><td style="width:70px;">留言时间</td><td style="width:100px">操作</td></tr>
  <?php foreach($messages as $m){?>
  <tr><td><?php echo $m['id']?></td><td><?php echo $m['name']?></td><td><?php echo strip_tags($m['message'])?></td><td><?php echo $m['date']?></td>
  <td><a href="deletemessage.php?id=<?php echo $m['id']?>">删除</a>  <a href="editmessage.php?id=<?php echo $m['id']?>">修改</a></td>
  </tr>
<?php }?>
</table>
<div class="page">
  <?php for($i=1;$i<= ceil($total/$pagesize);$i++){?>
<a class="<?php echo $i==$page?'cur':''?>" href="message.php?page=<?php echo $i?>"><?php echo $i;?></a>
<?php }?>
</div>
  <form action="" method="post" onsubmit="_post();return false;";>
   <ul>
   <li><span>姓名:</span><input type="text" name="name" value="" id="name"></li>
   <li><span>留言:</span><textarea name="message" id="message"></textarea></li> 
   <li><input type="submit" value="提交"></li>

   </ul>
</form>
<script>
  function _post(){
  var name=$("#name").val();//获取name
  var message=$("#message").val();//获取message
$.ajax({
  type: "POST", //提交方式
      url: "messageAjax.php", //提交到的文件
      data: "name="+name+"&message="+message, //提交的数据
      dataType:'json',//数据类型
   success: function(msg){
      //根据返回来处理页面
	if(msg.result=='ok'){
	//成功
	  $('<tr><td>'+msg.id+'</td><td>'+name+'</td><td>'+message+'</td><td>'+msg.date+'</td><td><a href="deletemessage.php?id='+msg.id+'">删除</a>  <a href="editmessage.php?id='+msg.id+'">修改</a></td></tr>').insertAfter($("table .first"));//在table最前面更新
      }else{
	//失败
	alert(msg.message);
      }
   }
});

}
</script>
</body>
</html>

messageAjax.php里面的内容

<?php
include_once(dirname(__FILE__)."/lib/init.php");

$name= $_POST['name'];
$message=htmlspecialchars( $_POST['message']);
$date = date("Y-m-d H:i:s",time());

if($name && $message){
  if(!get_magic_quotes_gpc()){
    $message = addslashes($message);
  }

  $db = new mysql();

  //保存到数据库
  $query = "INSERT INTO message (`name`,`message`,`date`) values ('$name','$message','$date')";
  $db->query($query);
  $id = $db->insert_id();

  if($id>0){
    echo json_encode(array('result'=>'ok','id'=>$id,'date'=>$date));exit;//成功返回信息
  }else{ 
    echo json_encode(array('result'=>'false','message'=>"出错啦"));exit;//失败返回信息

  }
}

这是一个简单的例子,大家可以试试把删除和修改做成ajax

本文固定链接: http://www.qaforcode.net/archives/391 | 猪哥每日一贴

该日志由 趴在树上的猪 于2012年12月07日发表在 html, javascript, php 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: ajax基础 | 猪哥每日一贴
关键字: ,
【上一篇】
【下一篇】

ajax基础:等您坐沙发呢!

发表评论


快捷键:Ctrl+Enter

浙公网安备 33010602001905号