`
xyc20080413
  • 浏览: 11801 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
最近访客 更多访客>>
社区版块
存档分类
最新评论

一个最简单的基于PHP+jQuery的AJAX例子【转】

    博客分类：
  • php
jquery 
阅读更多

说在前面：本文只作为一个笔记留存用以达到语言重用的效果，可能对于很多大虾过于入门级，请直接无视。

基本上一说起ajax，大家都感觉到比较神秘，我以前也是这样，总觉得这个和荷兰一家足球俱乐部同名的玩意儿是个高深莫测的东西。其实ajax之所 以看上去那么蛋疼主要是为了解决各浏览器对js的兼容性问题而写了太多的代码，以至于一看见就头昏。强大简易的jquery扭转了这个局面。

首先说下个人对ajax的简单理解：html、css、js(jQuery等)是给浏览器看的，PHP是给服务器看的，js可以和php对话，而 php可以生成html、css和js，以前我们浏览网页的时候，总是通过操作html，通过php告诉服务器我们需要什么内容，然后服务器会在一个新的 页面将你请求的信息展示给你；而ajax，即是我们操作html时告诉js，然后js告诉php，php得到命令以后到服务器去取了你要的信息交给 js，js再将此信息展示给你。这么看来ajax貌似更复杂一点，但是他带来几个好处：1. 你不需要进入一个新的页面就可以看到你所请求的信息；2.php只需要提取出产生了变化的有限信息即可，减少了重复。

简单扼要的说就是ajax模拟了提交表单的行为，但是把刷新页面这件事交由js在后台偷偷完成了。

由此可见ajax其实是一个很容易理解的过程，下面用例子来说明。首先写一个html页面：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ajax test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery(function($){
  $('button').click(function(){
    $name = $(this).attr('name');
    $('#out').empty().load('test1.php',{ name : $name });
  });
});
</script>
<style type="text/css"></style>
</head>
<body>
<button id="btn-1" name="1">1</button>
<button id="btn-2" name="2">2</button>
<button id="btn-3" name="3">3</button>
<div id="out"></div>
</body>
</html>

 有一点html基础的童鞋可以看出，这里做了三个按钮，一个id为out的div，三个按钮是用来点击的，#out的div用来接收数据，每次点击button时先把#out清空，然后插入信息。

然后来写php：

<?php 
switch($_POST['name']){
  case 1:
    echo '1 哈哈';
    break;
  case 2:
    echo '2 呵呵';
    break;
  case 3:
    echo '3 活活';
    break;
}
?>

 

这段代码使用了php的switch语句，意思就说根据post中name的值来替换输出的内容，这里只是个简单的例子，你也可以通过这个原理让php进行更复杂的运算或输出更复杂的内容。

js我直接写在html里面了，没有单独用一个文件，用纯js写估计得写不少，用jQuery就2句搞定，其实一句都行，只是我这儿还是写成两句比较好理解一点。
第一句是吧button按钮中的name值存在一个变量里面，第二句是使用了jQuery的load函数，告诉php需要哪些信息，然后取回这些信息插入到#out中。

这个ajax就这么完成了，简单吗？

 

demo2:

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").slideToggle();
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>切换</button>
</body>
</html>

 demo3:

 

    $("#testButton").click(function() {  
        alert("I'm Test Button");  
    });

 

分享到：
| smarty分页
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics