简单的jquery无刷新表单提交实例

今天学习jquery 的ajax部分

这个自己写了一个无刷新提交,实现简单的计算器功能

分享给初学者学习,高手绕道!

本例子,包含一个html文件,一个php文件

两个文件放同一个文件夹下。

HTML文件:
[code]
<!DOCTYPE html>
<html>
<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<form action="" id="searchForm">
请输入一个数字,测试<input type="number" name="s" placeholder="Enter a number…" /> +
<input type="number" name="b" placeholder="Enter a number…" />
<input type="button" value="POST" id="su" />
</form>
<!– the result of the search will be rendered inside this div –>
<div id="result"></div>

<script>
$(function(){
$("#su").click(function() {
//var form = $(‘#searchForm’).serialize();
var s =$("input:[name=s]").val();
var b =$("input:[name=b]").val();
$.post("test.php",{s:s,b:b},function(data){
$("#result").html(data)
});
// alert("fsdf");
});
});
</script>

</body>
</html>
[/code]
php文件:
[code]
<?php
//print_r($_POST);
//$i = $_POST;
$s = $_POST[‘s’];
$b = $_POST[‘b’];
$i = $s+$b;
echo $i;

?>
[/code]

点击下载源码