ajax用jquery实现是非常简单的，但是很多新手都调试不成功，很容易受打击。现在用一些简单代码实现一次ajax加法计算器，让新手方便上手，高手请自动无视跳过。

实现过程只有两个网页，一个ajax.htm,一个houtai.php，这里只给出最简洁的代码，如果想优化可以自己来。

ajax.htm的代码如下，可以直接复制保存

<script src="http://www.anlian1.com/jq.js"></script>

<script>

$(document).ready(function(){

$("#jisuan").click(function(){

$.post("houtai.php",

{

diyige:$("#diyige").val(),

dierge:$("#dierge").val(),

},

function(data,status){

$("#jieguo").html(data);

});

});

});

</script>

<input type="text" id="diyige">+

<input type="text" id="dierge">

<div id="jisuan">计算</div>

<div id="jieguo"></div>

houtai.php代码如下，也可以直接复制保存

<?php

$diyige = $_POST["diyige"]; //获取第一个数字，这是基本的php语法了

$dierge = $_POST["dierge"]; //获取第二个数字，这是基本的php语法了

echo $diyige+$dierge; //两个变量相加并输出，这也是基本的php语法了

?>

到这里访问ajax.htm就可以看到效果了，注意要在php环境中运行。

下面是代码的注解，如果觉得代码一看就懂就不用看下面的注解的，如果有不懂的地方就看下面的详细解释。

首先引入jquery

<script src="http://www.anlian1.com/jq.js"></script>

然后定义两个输入框和两个div

<input type="text" id="diyige">+ //这个用来输入第一个数字

<input type="text" id="dierge"> //这个用来输入第二个数字

<div id="jisuan">计算</div> //这个为触发jquery的按钮

<div id="jieguo"></div> //这个用来显示计算结果

jquery的代码也很简单

$.post("houtai.php", //定义处理页面

{

diyige:$("#diyige").val(), //获取第一个数并post提交

dierge:$("#dierge").val(), //获取第二个数并post提交

},

function(data,status){

$("#jieguo").html(data); //这里获取反回结果并显示到结果div中

});